border能画出三角形是因为浏览器将四条边框以45°斜线交汇于一点，当width:0且height:0时，三边设transparent、仅单边有色，便“挤”出等腰直角三角形；方向由有色边决定（如border-top→尖朝下），大小由该边border-width精确控制，必须满足零宽高、solid边框、显式声明三边transparent三个硬条件。
为什么border能画出三角形
浏览器渲染边框时，四条边在角上不是直角拼接，而是以45°斜线交汇。当元素width: 0、height: 0，四条边就全部收束到一个点；此时把其中三边设为transparent，只剩一边有颜色和宽度，视觉上就“挤”出了一个实色三角形。
这不是hack，是CSS规范定义的边框渲染行为——所有现代浏览器都一致支持，包括IE8+。
必须满足的三个硬条件
缺一不可，否则三角形不出现、变形或错位：
-
width: 0且height: 0（不能用visibility: hidden或opacity: 0替代） - 四边
border-style: solid（dashed或dotted会断裂） - 三边
border-color: transparent，仅留单边设具体颜色（如border-top: 8px solid #333）
常见错误：只写border-top: 8px solid #333，其余三边没显式设transparent——它们会继承currentColor，变成难调试的小黑块。
立即学习“前端免费学习笔记（深入）”；
方向与大小怎么控制
方向由“哪条边有颜色”决定，不是靠transform或rotate：
- 向下箭头 →
border-top: 8px solid #333+ 其余三边transparent - 向上箭头 →
border-bottom: 8px solid #333 - 向右箭头 →
border-left: 8px solid #333 - 向左箭头 →
border-right: 8px solid #333
大小只由该有色边的border-width决定。例如border-top: 12px solid #333，三角形高度就是12px；想更尖锐？调小宽度；想更宽厚？加大宽度。但注意：em、rem禁用——字体缩放会拉扯三角比例，一律用px。
三角形总偏移、发虚或消失？先查这四点
90%的“画不出来”问题都不在border代码本身：
- 父容器有
overflow: hidden→ 直接裁掉border区域，三角消失 - 元素是
inline（默认）→ 受文字基线影响，实际占位不为0，三角塌成梯形；加display: block或display: inline-block - 祖先元素用了
transform: scale()→ 部分浏览器重算border渲染坐标，位置漂移 -
font-size或line-height过大 → 即使width/height: 0，inline元素仍被撑开；临时加outline: 1px dashed red可立刻暴露真实边界
真正难的不是画出三角，是让它在flex容器、缩放页面、不同DPR屏幕下都稳住形状和位置——这时候伪元素::after比真DOM更可控，也更轻量。
