用border实现三角形图标的唯一可靠路径是：width:0、height:0、三边transparent、单边设色；方向由设色边决定（如border-top为向下箭头），大小由该边border-width值精确控制，整数px单位确保清晰。
直接说结论：用 border 实现三角形图标，唯一可靠路径是——width: 0、height: 0、三边 transparent、单边设色，方向和大小全由哪条边设色、以及该边的 border-width 决定。其他写法要么不兼容，要么不可控。
为什么三角形总偏移、发虚或根本看不见
不是代码写错了，而是上下文在“悄悄改规则”：
- 父容器有
overflow: hidden—— border 渲染区域被裁掉，三角直接消失 -
font-size或line-height不为 0 —— inline 元素被基线撑开，零宽高失效，三角变梯形 - 用了
transform: scale()的祖先元素 —— 部分浏览器会重算border-width，导致位置漂移 - 没加
display: block或inline-block—— 默认inline受文字流影响，“吊着”不居中
调试时加一句 outline: 1px dashed red，立刻看清真实边界，比猜快十倍。
怎么精准控制方向和大小
方向不是“朝哪画”，而是“哪边留色”；大小不是“三角高”，而是“那条边的 border-width 值”：
立即学习“前端免费学习笔记（深入）”；
- 向下箭头 →
border-top: 8px solid #333，其余三边transparent - 向右箭头 →
border-left: 8px solid #333，其余三边transparent - 向上箭头 →
border-bottom: 8px solid #333，其余三边transparent - 向左箭头 →
border-right: 8px solid #333，其余三边transparent
注意：border-width 必须是整数（如 8px），避免 7.5px 这类值——亚像素渲染会让边缘发虚或半透明，尤其在非 Retina 屏上。
带边框的三角形怎么实现
CSS 的 border 本身已是绘制手段，无法给同一个元素再套一层边框。真要描边，必须用伪元素叠加：
- 用
::before画主色三角（如#333） - 用
::after画同向但大一圈的三角，颜色设为边框色（如#999） -
::after往目标方向偏移1.414 × 边框宽度（不是1×），才能严丝合缝盖住内三角边缘 - 两个伪元素都必须设
width: 0; height: 0;，定位用position: absolute+transform: translateY(-50%)垂直居中
移动端别用 em 或 rem 写 border-width —— 它们随字体缩放，三角比例会失真；一律用 px。
最易被忽略的一点：三角不是独立图形，它依附于盒模型边界。一旦父级有 transform、perspective 或 will-change，边框交汇角度可能微变，箭头就偏了。
