如何精准计算箭头组成的六边形中的translateX值

要实现六个箭头无缝拼接成六边形，无需通过穷举法试值，我们可以利用正六边形的几何特性推导translateX的精确值。

几何推导核心 #

你的箭头通过clip-path定义了对称的六边形形状，当六个箭头组成正六边形时，相邻箭头的边缘需完全贴合。结合正六边形的内角（120°）与边长比例关系，可推导出translateX的精确比例：

精确值为 (√3 - 1)/2 × 100%，计算后约等于 36.60254%，这和你穷举得到的37%高度接近，但精度更高。这个比例来自正六边形相邻顶点的水平偏移特性，完全匹配箭头clip-path的顶点位置关系。

两种实现方案 #

方案1：CSS直接使用精确值

直接在CSS中替换穷举的37%为精确计算值（用√3的近似值代入）：

.arrow {
  /* 保留原有样式 */
  transform: rotate(calc(360deg / 6 * var(--i))) translate(calc((1.73205 - 1)/2 * 100%), -25%);
}

如果需要更高精度，可使用1.7320508075688772作为√3的近似值。

方案2：JavaScript动态计算

若需动态适配或保证绝对精度，用JavaScript计算精确值并应用到每个箭头：

const sqrt3 = Math.sqrt(3);
// 计算精确的translateX百分比，保留6位小数
const translateX = ((sqrt3 - 1) / 2 * 100).toFixed(6) + '%';

document.querySelectorAll('.arrow').forEach(arrow => {
  const index = parseInt(arrow.style.getPropertyValue('--i'));
  const rotateDeg = 60 * index;
  arrow.style.transform = `rotate(${rotateDeg}deg) translate(${translateX}, -25%)`;
});

效果验证 #

替换后，六个箭头的边缘会完全无缝拼接，因为这个值是基于几何特性精确推导的，而非试错得到的近似值。

内容的提问来源于stack exchange，提问作者Shuo