唯一稳定兼容IE8+的方案是width:0、height:0、三边transparent、单边solid；方向由设色边决定，大小由该边border-width控制，常见失效源于overflow:hidden、line-height干扰或未设display:block。
纯 CSS 用 border 做三角形图标，唯一稳定、兼容 IE8+、不依赖 JS 或现代属性的方案，就是让元素 width: 0 且 height: 0，三边设 transparent，仅留一边为实色 solid——这不是“画”出来的，是浏览器在边框交汇处自动渲染出的等腰直角三角形。
为什么写了 border 却没看到三角形
常见现象是空白、梯形、矩形块，甚至箭头朝向完全反了。根本原因不是 border 写错，而是“零尺寸”前提被破坏：
-
width: 0但漏了height: 0→ 元素仍有默认高度，底板残留 - 元素是
inline（如<span>），又没加display: block或display: inline-block→ 受line-height和基线对齐影响，“吊着”不居中 - 父容器设置了
overflow: hidden→border渲染区域被裁剪，三角直接消失 - 祖先元素用了
transform、perspective或will-change→ 边框交汇角度微偏，三角歪斜或发虚
调试时加一句 outline: 1px dashed red，立刻看清元素真实边界，比猜快得多。
如何控制方向和大小：别靠猜，看哪条边有颜色
方向由“哪条边设了实色”决定，不是“朝哪写”，也不是“朝哪定位”。大小由该边的 border-width 值精确控制，其余三边必须等宽且为 transparent：
立即学习“前端免费学习笔记（深入）”；
- 向下箭头 →
border-top: 8px solid #333，border-left/border-right等宽transparent - 向上箭头 →
border-bottom: 8px solid #333，border-left/border-right等宽transparent - 向右箭头 →
border-left: 8px solid #333，border-top/border-bottom等宽transparent - 向左箭头 →
border-right: 8px solid #333，border-top/border-bottom等宽transparent
禁用 7.5px、0.5em 这类非整数 px 值——亚像素渲染会导致边缘模糊，尤其在非 Retina 屏上；移动端一律用 px，不用 em/rem。
伪元素实现零 DOM 开销的下拉箭头
实际项目中，直接用 <div class="arrow"></div> 会引入无意义节点。更干净的做法是用 ::after：
- 目标元素加
position: relative -
::after设content: ""、position: absolute、width: 0、height: 0 - 用
top/right/bottom/left定位，再配合transform: translate(-50%, -50%)微调居中（不能只靠margin或top: 50%） - 若父容器是
flex，检查是否被flex-shrink压缩，必要时加flex-shrink: 0
注意：::after 的 border 不参与文档流，但它的位置极其脆弱——稍一改动祖先的 transform、overflow 或字体设置，就可能脱节或裁剪。
带描边的三角形怎么实现
CSS 的 border 本身已是绘制手段，无法给同一元素再套一层边框。真要描边，必须用双伪元素叠加：
-
::before画主色三角（如#333） -
::after画同向但大一圈的三角（如#999），border-width比::before大约1.414 × 描边宽度（即 √2 倍），才能严丝合缝盖住内三角边缘 - 两个伪元素都必须设
width: 0、height: 0，且用相同定位策略
真正难的不是写出一个三角，而是在复杂布局里稳住它的位置和比例——它不占文档流，却对父级的 overflow、transform、will-change 异常敏感。稍有不慎，交汇角度就偏了，箭头就歪了。
