必须宽高为0、仅一侧边框有色、其余三边显式透明，因边框三角形依赖四边交界斜角在零尺寸下聚合成形，缺一即失真或消失。
直接用 border 类组合就能画出三角形，不需要写自定义 CSS，但必须满足三个硬性条件：宽高为 0、仅一侧边框有色、其余三边显式设为透明。
为什么 w-0 h-0 是必须的
浏览器渲染边框时，四条边在元素盒模型的四个角交汇。当 width 和 height 都为 0，边框交点被迫收拢成一个点，此时每条边的视觉表现就从“梯形”退化为“三角形区域”。漏掉 w-0 或 h-0，哪怕只是 h-0.5，都会让底边拉长、形状失真。
常见错误现象：div 看起来像一个小矩形块，或三角形歪斜、带锯齿。
- 必须同时用
w-0和h-0，不能只写其中一个 - 不要用
invisible、opacity-0替代——它们不改变盒模型尺寸 - 如果父容器有 padding 或 flex 对齐干扰，需额外加
shrink-0防止被压缩变形
border-x-transparent 不能省略
Tailwind 的 border-transparent 是批量设置所有边颜色为 transparent，但它不覆盖边框宽度。如果你只写 border-b-red-500，其他三边会继承浏览器默认 border-color: currentColor（通常是文字色），导致意外出现黑/灰小方块。
正确做法是显式声明哪三边透明：
- 向下三角：用
border-t-transparent border-r-transparent border-l-transparent border-b-red-500 - 向右三角：用
border-t-transparent border-b-transparent border-l-transparent border-r-blue-500 - Tailwind v3.3+ 可简写为
border-4 border-transparent border-b-red-500——border-4设宽度，border-transparent覆盖颜色，border-b-red-500单独覆盖底部
方向与边框命名的对应关系
三角形指向的方向，由「有颜色的那条边」决定，而不是它所在的位置。例如：border-b-red-500 表示“底部边框有色”，实际效果是**向上指的三角形**（因为底部边框撑开了下方空间，颜色区域朝上收束）。
容易混淆的点：
-
border-t-*→ 向下指（顶部边框有色，朝下收束） -
border-b-*→ 向上指（底部边框有色，朝上收束） -
border-l-*→ 向右指（左边框有色，朝右收束） -
border-r-*→ 向左指（右边框有色，朝左收束）
验证方法：把颜色换成 border-b-green-500，观察绿色区域是从底边向上“堆叠”出来的，不是向下延伸。
边框宽度如何影响三角形大小和比例
三角形底边长度 ≈ 边框宽度 × √2，高度 = 边框宽度。所以 border-b-4 生成的三角形高约 4px，底边约 5.6px；border-b-8 则高 8px、底边约 11.3px。
若要非等腰直角三角形（比如更扁或更尖），只能靠不对称边框宽度实现，例如：
<div class="w-0 h-0 border-t-0 border-r-0 border-b-8 border-l-4 border-b-red-500 border-l-transparent"></div>
但这类写法会破坏语义清晰度，建议优先用 clip-path 替代。
真正容易被忽略的是：Tailwind 默认没有 border-b-[6px] 这类任意值类名，除非你手动在 theme.extend.borderWidth 中添加，否则只能用内置的 border-b-0 ~ border-b-8 等离散值。需要精确控制时，得回退到内联 style 或自定义插件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
