必须设width:0和height:0，否则三角形会变形或不可见；因浏览器以content box左上角为原点绘边框，非零宽高会导致交点偏移，四边无法在顶点交汇成标准三角形。
必须设 width: 0 和 height: 0，否则三角形会变形或根本出不来——这不是可选项，是盒模型渲染机制决定的硬约束。
为什么 width 和 height 都得是 0
浏览器绘制边框时，以 content box 的左上角为原点向外延伸。只要 width 或 height 不为 0，content 区域就存在，四条边框的交点就会从顶点偏移，导致三角形被“撑开”成梯形、错位甚至不可见。
常见错误现象：
- 三角形底部有空白或悬浮在父容器外 —— 很可能是父元素有默认
line-height或font-size，影响了行内盒子基线对齐 - 三角形歪斜或尺寸不对 —— 实际高/底边长由 border 宽度决定，不是你直觉认为的“等比例缩放”
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式设置
font-size: 0和line-height: 0，尤其在 IE8 或老版本 Safari 中能避免意外撑高 - 加
overflow: hidden防止极少数场景下边框溢出（如某些 flex 容器中） - 不要依赖父容器清除默认样式，每个三角形元素自己声明更可靠
border 四边必须都声明，不能只写一条有色边
很多人以为写 border-bottom: 20px solid red 就够了，结果啥也没出来。因为浏览器需要四条边框同时存在、非零，才能在顶点交汇形成斜切交线；漏掉任意一边（比如没声明 border-top），它就按初始值 medium none 处理，等于那条边不存在，交点塌缩，三角形直接消失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用四值写法：
border-color: transparent transparent red transparent，顺序是上右下左 - 避免混用简写和单边：比如写了
border: 20px solid transparent又单独覆盖border-bottom-color: red，容易因层叠顺序出错 - IE6 不支持
transparent，若需兼容，改用背景色 +border-style: dashed模拟透明（但现代项目基本不用考虑）
控制朝向和等腰形状的关键参数组合
三角形方向完全由哪条 border 有色决定；是否等腰，取决于相邻两条透明边的 border-width 是否相等。比如向下箭头要等腰，border-left 和 border-right 的宽度必须一致。
常见有效组合：
- 向下箭头：
border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 18px solid #333 - 向右箭头：
border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 18px solid #333 - 直角三角形（向右）：
border-top: 0; border-right: 20px solid blue; border-bottom: 20px solid transparent（注意border-top: 0是合法且必要的，但不能写成border-top: none，后者会清空整条边）
性能提示：所有 border-width 值必须是非零数字，0 表示该边不参与交汇，会破坏三角形结构。
容易被忽略的渲染细节
三角形的“高”严格等于有色边的 border-width，但底边长度是相邻两条透明边 border-width 之和。比如 border-bottom: 24px solid red + 左右各 20px transparent，得到的是一个高 24px、底边 40px 的等腰三角形。
这意味着：
- 想微调角度？改相邻透明边的宽度比，而不是单纯拉高有色边
- 在 Retina 屏上做适配时，别直接把
border-width翻倍，先测实际像素表现，有些浏览器对 sub-pixel 边框渲染不稳定 - 如果三角形用于 Tooltip 箭头，且 Tooltip 有阴影或圆角，记得给三角形也加
filter: drop-shadow()或用伪元素包裹，否则边缘会露白
