唯一可靠方式是width:0、height:0、三边transparent、单边设色；方向由设色边决定（如border-top向下），大小由该边border-width整数px值精确控制，常见失效源于overflow:hidden、font-size干扰或未设display:block。
用 border 实现三角形图标，唯一稳定可靠的方式就是：元素 width: 0、height: 0，四边都有宽度，其中三边设为 transparent，仅留一边设实色——不是“画”出来的，是浏览器在零尺寸下强制交汇时自然形成的视觉结果。
为什么三角形总不出现或歪斜
不是代码写错了，而是上下文悄悄破坏了前提条件：
- 父容器有
overflow: hidden—— 边框渲染区域被裁掉，三角直接消失 -
font-size或line-height不为 0（哪怕只是14px）—— inline 元素被基线撑开，实际尺寸不为 0，三角塌成梯形 - 没加
display: block或display: inline-block—— 默认 inline 受文字流影响，“吊着”不居中，位置飘忽 - 祖先元素用了
transform: scale()—— 部分浏览器会重算border-width，导致顶点偏移
调试时加一句 outline: 1px dashed red，立刻看清真实边界，比猜快十倍。
方向和大小怎么精准控制
方向由「哪条边设了实色」决定，不是“朝哪画”，而是“哪边留色”；大小只由该边的 border-width 值决定，其他三边宽度必须相等且非零：
立即学习“前端免费学习笔记（深入）”；
- 向下箭头 →
border-top: 8px solid #333，其余三边transparent - 向上箭头 →
border-bottom: 8px solid #333，其余三边transparent - 向右箭头 →
border-left: 8px solid #333，其余三边transparent - 向左箭头 →
border-right: 8px solid #333，其余三边transparent
border-width 必须用整数 px 单位（如 8px），避免 7.5px 这类值——亚像素渲染会让边缘发虚，尤其在非 Retina 屏上。
Tailwind CSS 中容易踩的坑
用 Tailwind 写三角形看似简单，但三个硬条件缺一不可：w-0、h-0、显式声明三边透明：
-
border-transparent只设颜色，不设宽度；漏掉border-4类，边框压根不出现 - 只写
border-b-red-500是错的——其他三边会继承currentColor（通常是文字色），变成黑/灰小方块 - 正确写法是：
border-4 border-transparent border-b-red-500（v3.3+ 支持）或显式写全：border-t-transparent border-r-transparent border-l-transparent border-b-red-500 - 别用
invisible或opacity-0替代transparent——它们不改变盒模型，三角形不会形成
如果父容器是 flex 布局，记得加 shrink-0，防止被压缩变形。
带描边的三角形怎么实现
CSS 的 border 本身已是绘制手段，无法给同一个元素再套一层边框。真要描边，必须用伪元素叠加：
- 主三角用
::before，设width: 0; height: 0;、单边实色 - 描边用
::after，同向但border-width大一圈（比如主三角用8px，描边就用9px），颜色设为描边色 - 两个伪元素都需
position: absolute+transform: translateY(-50%)垂直居中 - 注意：描边三角不能简单偏移
1px，得按 √2 × 描边宽度（约1.414 ×）微调，才能严丝合缝盖住内三角边缘
移动端别用 em 或 rem 写 border-width——它们随字体缩放，三角比例会失真；一律用 px。
