必须将宽高设为0，才能使四条边框从同一点交汇形成等腰直角三角形；若宽高非零，则得到梯形而非纯三角形；方向由有色边的对边决定，大小由该边border-width控制。
直接用 border + transparent 就能画出清晰、兼容、无 JS 的三角形，不需要 clip-path 或 linear-gradient——后者调试费劲，且在 IE、旧 Safari 里直接不显示。
为什么必须把宽高设为 0
当 width 和 height 都是 0 时，四条边框不再“围住内容”，而是从同一个中心点向外延伸交汇，每两条相邻边框交界处自然形成一个等腰直角三角形区域。你只留一条有色边框、其余设 transparent，视觉上就“漏”出一个方向明确的三角形。
如果宽高不为 0（比如 width: 20px; height: 20px），边框会叠加在盒模型上，得到的是带尖角的梯形或不规则块，不是纯三角形。
-
width: 0和height: 0缺一不可 - 不能靠
overflow: hidden去“裁”出三角形——那只是遮丑，不是生成 - 伪元素（如
::before）也得遵守这个规则，否则照样失效
四个方向的标准写法与常见翻车点
方向由“哪条边框有色”和“哪三条透明”共同决定。口诀：三角形指向的方向，是“有色边框的对边”。例如：border-bottom 有色 → 指向上；border-right 有色 → 指向左。
标准写法（以 12px 大小为例）：
- 向上：
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;
容易踩的坑：
- 写成
border: 12px solid transparent; border-bottom-color: #333—— 这会让左右边框也继承#333（border简写重置全部颜色） - 左右边框宽度不等，比如
border-left: 10px; border-right: 14px→ 顶点偏移、三角形歪斜 - 父容器有
overflow: hidden，而三角形用position: absolute往外偏移 → 被裁掉，得检查定位上下文是否包含该父级
Tailwind 中写三角形的三个硬条件
Tailwind v3.3+ 支持原子类组合，但漏掉任意一项都会失败。
- 必须有
h-0 w-0（宽高归零） - 必须显式声明三边为
border-transparent，不能只靠border-b-red-500—— 否则其他三边会继承currentColor，变成小色块 - 必须有统一的边框宽度类，比如
border-4（否则边框压根不出现）
正确写法：h-0 w-0 border-4 border-transparent border-b-red-500。如果用旧版 Tailwind 或需兼容 flex 容器，还要加 shrink-0，防止被压缩变形。
没法直接加描边？试试这几种解法
纯 border 法生成的三角形，本身没有“内部空间”，所以不能像普通元素那样再套一层 border。但有实际办法：
- 用伪元素叠一层更小的同向三角形，颜色设为描边色，错位 1px 模拟描边
- 改用
clip-path: polygon()（注意 IE/旧 Safari 不支持） - 高对比度模式下，建议用
prefers-contrast: high媒体查询单独增强边框色差，避免透明边框在系统强制高反差时“消失”
真正难的不是画出来，而是让三角形在各种上下文里都稳——尤其是嵌在 flex、grid 或缩放容器中时，shrink-0、min-width: 0、transform: translateZ(0) 这些细节，往往比画法本身更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
