用border实现三角形需同时满足w-0、h-0和三边transparent，方向由有色边决定：border-b生成向上三角，border-t向下，border-l向右，border-r向左。
直接用 border 配合 width: 0 和 height: 0 就能画出干净、无额外请求的三角箭头，不需要图片或 SVG——但必须同时满足三个条件，漏一个就显示不出来。
为什么只设 border-bottom 却出来向上的三角？
方向由“哪条边没被设为 transparent”决定，不是由属性名直觉判断。比如：border-bottom: 10px solid #000 实际生成的是**向上指的三角**，因为浏览器把底部边框的斜接点“顶”到了元素上方中心位置。
-
border-top→ 向下三角（色块在顶部，斜边向下张开） -
border-bottom→ 向上三角 -
border-left→ 向右三角 -
border-right→ 向左三角
常见错误是照着属性名硬猜方向，结果调试半天发现箭头反了。
用 Tailwind 写三角时总多出一块灰边？
这是 border-transparent 类没起效导致的：它只设颜色，不设宽度和样式，所以其他三边会继承父级 border-color 或 currentColor（通常是文字色），变成难看的小方块。
立即学习“前端免费学习笔记（深入）”；
- 正确写法必须显式声明四边：
border-4 border-transparent border-b-red-500（v3.3+ 支持） - 旧版 Tailwind 要写全：
border-t-transparent border-r-transparent border-l-transparent border-b-red-500 - 别用
invisible或opacity-0替代transparent——它们不改变边框渲染逻辑，三角形压根不会形成
三角边缘发虚、有白边，怎么修？
本质是亚像素渲染问题。只要 border-width 值带小数（如 9.5px），非 Retina 屏就会插值模糊；加上父容器有 transform: scale() 或缩放设置，问题更明显。
- 强制用整数：
border-bottom: 8px solid #000，别用em/rem单位 - 加
transform: translateZ(0)触发硬件加速（对 Chrome 有效） - 调试时临时加
outline: 1px dashed red看真实边界，比靠眼睛估准得多
伪元素画三角时定位总偏移？
因为 border 渲染区域以 content box 为基准，而 width: 0; height: 0 下，视觉中心并不天然落在你写的 top: 0 或 left: 0 上。
- 垂直居中别用
margin-top: -5px硬调，改用：top: 50%; transform: translateY(-50%) - 避免在
font-size: 0的父容器里画——某些浏览器会连带影响border宽度计算 - 如果父级用了
flex，记得给伪元素加shrink-0（Tailwind）或flex-shrink: 0，否则可能被压缩变形
真正麻烦的不是画不出，而是它依附于盒模型边界——一旦父级有 transform、perspective 或 will-change，斜接角度就微偏，这时候再调参数不如直接换 SVG。
