如何用CSS使三角箭头尖端对齐70%长度的条形末端？

这个坑我之前踩过！核心问题是你用border绘制的箭头本身有宽度（左右border各10px，总宽度20px），直接设置margin-left:70%只会让箭头的左边缘对齐70%的位置，但箭头的尖端在它自己的中心位置，所以自然就偏右了。下面给你两种最实用的解决办法：

方法一：用calc()精准计算margin #

直接把margin-left调整为70%减去箭头一半的宽度（也就是10px），这样箭头的中心（尖端）就刚好对齐70%的位置：

.arrowUp {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
  margin-left: calc(70% - 10px); /* 关键：70%位置减去箭头半宽 */
}

方法二：绝对定位+transform偏移 #

如果你的箭头是放在条形的容器内，用定位的方式会更灵活，尤其适合响应式场景：

首先给容器设置相对定位，作为箭头的定位父级：

.bar-container {
  position: relative;
}

然后给箭头设置绝对定位，左偏移到70%后，再用transform: translateX(-50%)让箭头向左偏移自身50%的宽度，这样尖端就精准对齐70%的位置：

.arrowUp {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
  position: absolute;
  left: 70%;
  transform: translateX(-50%); /* 向左偏移自身半宽 */
  top: 20px; /* 根据你的布局设置合适的垂直位置 */
}

两种方法都能完美解决对齐问题，如果你是静态布局，方法一更简单；如果需要适配不同屏幕尺寸，方法二的灵活性更高～

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