border法能画三角形是因宽高为0时四边框在顶点交汇成四个等腰直角三角形，仅保留单边有色、其余三边transparent即可“漏出”方向明确的三角形；必须满足width:0、height:0、三边transparent且solid边框四个硬条件。
直接用 border 配合 width: 0 和 height: 0 是最可靠、兼容性最好（IE8+）、零 JS 依赖的方案；其他方法如 clip-path 或 linear-gradient 要么不支持旧浏览器，要么调试复杂、易出偏移。
为什么 border 法能画出三角形
不是“画”，是“漏”——当元素 width 和 height 都为 0 时，四条边框从中心点向外延伸交汇，每条边在交界处自然形成一个等腰直角三角形区域。只保留一条边有颜色、其余三边设为 transparent，视觉上就只剩下一个清晰的三角形。
-
border-width值直接决定三角形底边长度和高度（等腰直角时，高 ≈ 底边 / 2） - 必须四边宽度一致，否则顶点偏移、形状歪斜
- 不能只写
border: 10px solid transparent再覆盖某边颜色——border简写会重置所有边颜色，导致左右边也带色
四个方向的标准写法与常见翻车点
方向由“哪条边框有色”决定，口诀：三角形指向的是“有色边框的对边”。比如 border-bottom 有色 → 指向上；border-right 有色 → 指向左。
- 向上：
border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid #333; - 向下：
border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #333; - 向左：
border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 12px solid #333; - 向右：
border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid #333;
常见失效原因：
立即学习“前端免费学习笔记（深入）”；
-
width: 0但漏了height: 0→ 元素仍有默认行高，“吊着”显示成梯形 - 元素是
inline（如<span>），又没加display: block或display: inline-block→ 受line-height和基线对齐干扰 - 父容器设了
overflow: hidden→ 边框渲染区域被裁掉，三角形消失 - 用了
transform/perspective/will-change→ 边框交汇角度微偏，三角发虚或歪斜
用伪元素实现零 DOM 开销的箭头
实际项目中，避免为箭头单独加 <div class="arrow"></div>，推荐用 ::after 或 ::before：
- 目标元素需设
position: relative -
::after必须含content: ""、position: absolute、width: 0、height: 0 - 定位建议用
top/right/bottom/left+transform: translate(-50%, -50%)居中，别只靠margin或top: 50% - 若父容器是
flex，记得加flex-shrink: 0（Tailwind 中为shrink-0），否则可能被压缩变形
Tailwind 用户注意三个硬条件
Tailwind v3.3+ 支持简写，但缺一不可：
- 必须显式写
w-0 h-0（不能靠父级约束） - 必须显式声明三边透明：
border-transparent只设颜色，不设宽度；漏掉border-4类，边框压根不出现 -
border-b-red-500单独写是错的——其他三边会继承currentColor（通常是文字色），变成黑/灰小方块
正确写法：border-4 border-transparent border-b-red-500，或更稳妥地写全：border-t-transparent border-r-transparent border-l-transparent border-b-red-500。别用 invisible 或 opacity-0 替代 transparent——它们不改变盒模型，三角形不会形成。
