必须把 width 和 height 都设为 0，因为只有二者均为 0 时，四条边框才能在中心精确交汇形成尖锐顶点；若任一不为 0，内容盒撑开导致交点偏移，三角形变形、歪斜或断裂。
为什么必须把 width 和 height 都设为 0
只要其中任意一个不为 0，内容盒（content box）就会撑开，四条 border 的交点就不再汇聚于一点，三角形顶点会偏移、变形甚至断裂。比如 width: 1px; height: 0; 会导致底边拉长、左右边倾斜角度失真，视觉上变成梯形或带“尾巴”的怪状。
常见错误现象：
– 三角形底部发虚、边缘模糊
– 箭头指向歪斜（如本该朝下却略偏右）
– 在 Safari 或旧版 Chrome 中出现 sub-pixel 锯齿
- 务必同时写
width: 0;和height: 0;，不能省略任一 -
padding和margin也建议显式设为 0，避免意外干扰布局流 - 不要依赖 reset.css 的默认值，老项目里
button或input可能自带 padding
border 四边声明缺一不可
CSS 边框三角形的本质是四条边在零内容区交汇形成的四个等腰三角形拼合体。只写一条有色边（如 border-bottom: 20px solid #333;），其余三边由浏览器按默认色（通常是 currentcolor 或黑色）补全，结果不是透明而是实色干扰块。
正确做法是：显式声明全部四条边，用 transparent 覆盖不需要显示的三条。
- ✅ 推荐写法：
border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 20px solid #333; border-top: 0; - ⚠️ 危险简写：
border: 20px solid transparent; border-bottom-color: #333;—— 这在 IE8 下可能失效，且语义模糊 -
border-top: 0;比border-top: 0 solid transparent;更安全，避免某些安卓 WebView 解析异常
控制朝向和等腰形状的关键参数
三角形朝哪指，完全取决于哪条 border 是实色；是否等腰，取决于相邻两条透明边的 border-width 是否相等。
例如向下箭头：
– border-left: 20px solid transparent;
– border-right: 20px solid transparent;
– border-bottom: 24px solid #333;
→ 左右宽度一致 → 等腰；底边颜色实显 → 向下
- 向右箭头：用
border-top/border-bottom透明 +border-right实色，宽度匹配即可 - 若左 18px、右 22px → 三角形向右倾斜，不再是等腰，但可用于特殊设计（如动态箭头反馈）
- 高度 = 实色边的
border-width值；底边宽度 ≈ 两透明边border-width之和（严格说是交点间距）
IE8 及更老浏览器的兼容性陷阱
transparent 在 IE8 中渲染不稳定：有时被当作 none 处理，导致透明边“消失”，交点计算错乱；sub-pixel 渲染还会让细边（）出现虚化或断线。
真实项目中如果仍需支持 IE8：
– 改用 rgba(0,0,0,0) 替代 transparent（IE8 支持 rgba，但不支持 transparent 作为 border 颜色）
– 避免 border-width 小于 3px，否则尖角易糊
- IE8 不识别
border-color: transparent transparent #333;的简写，必须拆成四条独立声明 - 伪元素（
::before）方案在 IE8 中需加zoom: 1;触发 hasLayout 才能正确定位 - 移动端基本不用考虑此问题，但内网系统或政府旧平台仍可能踩坑
.arrow-down {
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 16px solid #333;
}
别省略任何一条边，也别指望浏览器帮你猜意图——CSS 盒模型画三角形，是精密交点控制，不是魔法。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
