用border实现三角形的原理是将元素宽高设为0，利用四边border交汇处形成斜角，通过设置三边透明、一边有色来“挤”出三角形；常见错误包括宽高不为0或未设置border-style。
用 border 实现三角形的原理
HTML 中没有原生三角形元素，div 本身只能是矩形。真正起作用的是 CSS 的 border 渲染机制：当一个元素宽高为 0，且四边 border 颜色、宽度、样式不同时，浏览器会把四条边的交汇处渲染成斜角——利用这个特性，把三边设为透明（或同背景色），留一边有色，就“挤”出三角形。
常见错误是只设 width/height 不归零，或者忘了给 border-style（必须是 solid 等可渲染样式，none 或 hidden 会直接消失）。
向下指的三角形怎么写（最常用场景）
这是最典型的用法，比如下拉菜单箭头、提示气泡尖角。关键在于：上边框留色，左右下边框设为透明，且三者宽度一致。
.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
}
要点：
立即学习“前端免费学习笔记（深入）”；
-
border-width决定三角形大小，三个方向必须相等才能对称 -
transparent是安全选择；用背景色（如#fff）在滚动或动态背景时容易露馅 - 不要加
padding或margin干扰定位，用position或外层容器控制位置 - 如果需要抗锯齿更平滑，可加
transform: translateZ(0)触发硬件加速（尤其在 Safari 中明显）
其他方向三角形的 border 组合规律
方向变化本质就是哪条边“显形”，其余三条“隐形”。记牢口诀：显形边决定朝向，隐形边要对称。
向上：border-bottom 有色，border-left/border-right 透明
向左：border-right 有色，border-top/border-bottom 透明
向右：border-left 有色，border-top/border-bottom 透明
容易踩的坑：
- 写反了边（比如想向右却写了
border-right）——结果是空的，因为没显形边 - 左右/上下
border-width不等 → 三角形歪斜，尖角偏移 - 在 Retina 屏上出现 1px 模糊线？那是
border-width被缩放导致半像素渲染，统一用偶数（如8px、12px）更稳
border 三角形的兼容性与替代方案
border 三角形在 IE8+、所有现代浏览器中完全可用，但有两个硬限制：无法加阴影（box-shadow 对 0×0 元素无效）、无法单独描边或填充渐变。
如果遇到这些需求，得换方案：
- 用
clip-path: polygon()：支持渐变、阴影、动画，但 IE 不支持，iOS Safari 旧版有渲染 bug - 用 SVG：
<svg><polygon points="..."></polygon></svg>—— 精确、可缩放、可交互，但 DOM 结构变重 - 用伪元素
::before/::after：最常用折中法，保持语义简洁，也方便用transform微调角度
真正难的不是画出来，而是它和文字/图标对齐时，基线计算容易错位。别依赖 vertical-align 猜，用 transform: translateY() 或 flex align-items 控制更可靠。
