必须用width:0和height:0，因浏览器以content box左上角为原点绘制border，非零宽高会导致四边交点偏移、三角形变形为梯形；三边transparent、单边实色且border-width为整数px才能确保顶点汇聚、方向准确、边缘清晰。
必须用 width: 0 和 height: 0，且四边 border-width 均为整数 px、三边 transparent、单边实色——否则盒尺寸不可控，三角形必然变形或消失。
为什么 width/height 必须为 0
浏览器以 content box 左上角为原点绘制 border；只要 width 或 height 不为 0，四条边框的交点就不再重合于一点，三角形顶点偏移，底边拉长成梯形。常见“三角形变胖”“底部多出空白”，八成是父容器有默认 font-size 或 line-height 把 inline 元素撑开了。
实操建议：
- 给三角形元素加
display: block或display: inline-block，避免文字流干扰 - 父容器设
font-size: 0或line-height: 0（尤其在 flex/inline 场景） - 调试时加
outline: 1px dashed red，一眼看清真实边界是否收缩到点
border-width 怎么影响实际盒尺寸
三角形本身没有“宽高”，但它的渲染区域由 border 的物理宽度决定：border-top: 8px solid #000 会生成一个视觉高度 ≈ 8px、底边 ≈ 16px 的等腰直角三角形，而整个元素的盒尺寸（含 margin/padding 外）就是该方向 border 宽度的两倍左右——因为左右透明边也占空间。
关键点：
-
border-width必须用整数px（如6px），禁用em、rem或小数（如5.5px），否则亚像素渲染导致边缘发虚 - 若要缩小整体占位，可设非目标边为
0，例如向下的三角形：border-top: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #000 - 用 Tailwind 时，
border-4和border-transparent必须同时存在，只写border-b-red-500会导致其他三边继承文字色，变成有色小方块
哪些样式会悄悄破坏盒尺寸稳定性
看似无关的 CSS 属性，可能让 border 渲染错位，使三角形“漂移”或“塌陷”：
-
overflow: hidden在父容器上：裁掉 border 区域，三角直接消失 -
transform: scale()（尤其scale(0.9)等非整数）：部分浏览器重算border-width，顶点偏移 -
vertical-align在 inline 元素上：基线对齐导致上下浮动，位置不可预测 - 祖先元素用了
will-change: transform或backface-visibility: hidden：某些 Chrome 版本触发 border 渲染异常
最稳妥做法：把三角形元素单独抽离为 position: absolute 子元素，并显式设 top/left 微调定位——别指望它自动居中。
真正难的不是写出三角形，而是让它在各种嵌套、缩放、字体上下文中始终稳定不飘。每次加新样式前，先检查 font-size、overflow、transform 这三个最常背锅的属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
