必须设transparent是因为border三角形依赖三边透明、一边有色形成的斜角区域；四边有色成矩形，两邻边有色成L形；默认none在旧IE中不等价transparent，易错位。
border绘制三角形时为什么必须设transparent？
因为 border 绘制形状本质是利用相邻边交叠形成的斜角区域，只有当三边为 transparent、仅留一边有颜色时，才能显露出那个方向的三角形。如果四边都有色，就只是个实心矩形；如果两邻边有色（比如上+右），会得到一个带尖角的L形色块，不是干净三角形。
常见错误：只设 border-top: 10px solid red，却忘了把 border-left、border-right、border-bottom 显式设为 transparent 或 0 —— 浏览器默认值是 medium none，但 none 在部分旧版IE中不等价于 transparent，会导致形状错位或消失。
- 正确写法：
border: 10px solid transparent; border-top-color: red; - 更稳妥写法（兼容 IE8+）：
border: 0; border-top: 10px solid red; border-left: 10px solid transparent; border-right: 10px solid transparent; - 注意：
border-width必须一致，否则斜边不对称，三角形歪斜
用伪元素画箭头时如何避免内容被遮挡？
伪元素 ::before 或 ::after 默认插入在元素内容之前/之后，但若用 position: absolute 定位又没调好 z-index，容易盖住文字或交互区域。尤其在按钮、标签类组件中，用户点不到文字就等于功能失效。
- 确保伪元素的
z-index小于主元素内容（比如设为-1），或主元素设position: relative; z-index: 1 - 用
content: ""+display: block是必须的，否则伪元素不渲染 - 若箭头需响应点击，别把它做成纯装饰——要么加
pointer-events: none让事件穿透，要么把整个交互区域扩大到包含箭头
示例（右侧箭头按钮）：
.btn::after {
content: "";
position: absolute;
top: 50%;
right: 12px;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: currentColor;
}
clip-path不支持IE和旧版Edge，border方案怎么补全圆角/梯形？
clip-path 能轻松做圆角三角、斜切、多边形，但 IE 完全不支持，Edge 12–18 仅支持 inset() 和 circle()，不支持 polygon()。而 border 技巧只能做直角三角、平行四边形、对话气泡尖角这类简单形状，无法直接实现圆角或非直角梯形。
立即学习“前端免费学习笔记（深入）”；
可行折中方案：
- 圆角三角：用两个重叠伪元素——底层用
border画直角三角，上层用border-radius+overflow: hidden的小圆角矩形盖住尖角，视觉模拟圆角 - 梯形：靠
transform: skewX()扭曲矩形，但要注意文本也会被倾斜，需对文字单独反向skewX()补偿 - 真正需要复杂形状（如五边形、星形）且要兼容 IE，建议降级为 SVG 内联，比 JS polyfill 更轻量可靠
伪元素+border方案在高DPI屏幕下出现模糊怎么办？
当用 border 画 1px 宽三角时，在 Retina 屏或 Windows 高缩放比（如 125%、150%）下，浏览器可能把 1px 渲染成 1.25px 或 1.5px，导致边缘发虚、锯齿明显，尤其在深色背景上特别刺眼。
- 优先用偶数像素（如
2px、4px）代替1px，减少亚像素渲染概率 - 加
transform: translateZ(0)或will-change: transform强制硬件加速，有时能改善渲染精度 - 终极解法：改用
background-image: linear-gradient()模拟三角形，可精确控制角度和抗锯齿（例如 45deg 渐变截取一角）
这个细节常被忽略——形状看起来“差不多”，但上线后设计师一眼就能看出边缘糊了。
