伪元素画三角形时border-color必须显式设transparent，因三边透明+一边有色才能形成斜角三角；若仅设单边颜色而忽略其余三边，旧ie中会因none不等价transparent导致错位或残留。
伪元素画三角形时 border-color 必须显式设 transparent
不设 transparent 就画不出干净三角形——浏览器默认 border-style: none 在旧 IE 中不等价于透明，会导致边框残留或错位。本质是靠三边透明 + 一边有色，利用相邻 border 交叠形成的斜角区域显形。
常见错误写法：border-top: 10px solid red，却没管其他三边；结果在 IE8–10 中可能显示为模糊色块或完全消失。
- 正确写法：先统一设
border: 10px solid transparent，再单独覆盖颜色，如border-top-color: red - 更兼容写法（IE8+）：用
border: 0清空默认，再逐边声明，如border-top: 10px solid red; border-left: 10px solid transparent; -
border-width必须四边一致，否则斜边不对称，三角形歪斜或尖角偏移
content: "" 是伪元素渲染的前提，不是可选项
哪怕只用伪元素做纯装饰（比如画个箭头、加个圆点），content 属性也必须存在且不能为 unset 或 inherit。空字符串 "" 是最安全取值，none 会直接让伪元素不生成。
容易被忽略的细节：
- 伪元素默认是
display: inline，若需宽高、定位或背景图，必须手动设display: block或inline-block - 用
url()插入 SVG 时，content不支持background-size控制缩放，得靠伪元素自身width/height+vertical-align对齐 - 不能写
content: "<img src="https://img.php.cn/?x-oss-process=image/resize,p_40" alt="如何利用CSS伪元素实现各种形状图标_编写content与border属性的CSS技巧">"——那只会原样输出 HTML 字符串，不会解析成图片
用 ::before / ::after 做箭头图标时 z-index 和 pointer-events 很关键
伪元素默认插在内容流中，一旦加了 position: absolute，又没调好层叠关系，就容易盖住文字或按钮可点击区域——用户点不到字，等于功能失效。
实操要点：
- 主元素加
position: relative; z-index: 1，伪元素设z-index: -1，确保文字在上层 - 若箭头只是视觉提示，加
pointer-events: none，让鼠标事件穿透到下方内容 - 若箭头本身要响应点击（比如折叠控件），就把交互区域扩大：用
padding或left/right把点击热区包进去，别只靠伪元素本身 - 示例右侧箭头：
.btn::after { content: ""; position: absolute; top: 50%; right: 12px; margin-top: -4px; border: 4px solid transparent; border-left-color: currentColor; }
border 方案画不了圆角/梯形，clip-path 是替代但有兼容断层
border 技巧只能生成直角三角、平行四边形、对话气泡尖角这类简单形状；想实现圆角三角、斜切边、任意多边形，必须用 clip-path。但它在 IE 全系不支持，Edge 12–18 仅支持 inset() 和 circle()，不认 polygon()。
没有银弹，只有折中：
- 对 IE9+ 场景，用
border+transform: rotate()模拟斜边（如 45° 旋转的细长矩形），但控制精度低 - 需要圆角时，放弃纯 CSS，改用内联 SVG 或 icon font，语义和兼容更稳
- 若坚持用
clip-path: polygon()，务必加降级：background-color填底色 +clip-path只在支持浏览器生效
真正难的不是怎么画，是怎么让不同浏览器下看起来“差不多”——border 方案可控但简陋，clip-path 灵活但断层明显，中间那段兼容区间得手动补全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
