靠谱，但仅适用于静态、固定尺寸、无交互的简单图形；响应式、动态样式、精准交互或复杂形状应优先选用内联svg。
用 ::before 和 ::after 拼三角形、梯形、六边形靠谱吗？
靠谱，但只适合静态、固定尺寸、无交互的简单几何图形。css伪元素本质是两个额外的渲染层，靠 border 技巧或 transform: rotate() 硬凑角度，一旦需要响应式缩放、动态颜色、描边控制或点击区域精准识别，立刻掉链子。
常见错误现象：border-width 设大了导致父容器意外撑开；transform: rotate(60deg) 后 :hover 区域错位；多层 clip-path 套用在伪元素上，safari 直接不渲染。
- 纯装饰性小图标（如对话框气泡尖角、加载动画中的旋转菱形）可用，尺寸写死
width: 8px; height: 8px; - 避免用
vw/rem驱动伪元素尺寸——计算逻辑脱离布局流，缩放时比例失真 - 需要描边？别碰
border，改用box-shadow: 0 0 0 1px #000，更可控
clip-path 配合伪元素画六边形，为什么 chrome 显示正常 Safari 却空白？
因为 Safari 对伪元素 + clip-path 的组合支持滞后，尤其当路径含百分比坐标或 inset() 时，会静默失败。不是 bug，是规范实现节奏差异。
使用场景：想用纯 CSS 实现带悬停变色的六边形头像容器，又不想引入 SVG 标签。
立即学习“前端免费学习笔记（深入）”；
- 绕过方案：把
clip-path移到主元素上，伪元素只负责叠加渐变或阴影，不参与裁剪 - 路径写绝对数值，例如
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)→ 改成clip-path: polygon(50px 0, 100px 25px, 100px 75px, 50px 100px, 0 75px, 0 25px) - 加兜底：
clip-path: polygon(...); clip-path: url(#hex-mask);，让支持 SVG 引用的浏览器走后备路径
伪元素拼图性能比单个 SVG 差在哪？
差在重排重绘成本和图层合成逻辑。每个伪元素都是独立的渲染对象，6 个 ::before 叠出一个雪花图标，等于强制浏览器建 6 个图层；而一个内联 SVG 是单个 dom 节点，GPU 合成效率高一倍以上。
性能影响明显的情况：页面有 20+ 这类“伪元素几何体”，且伴随 opacity 动画或 scroll 触发的 transform。
- 用
will-change: transform救不了——伪元素本身没有自己的堆栈上下文，提升图层失败 - chrome devtools 的 “Rendering” 面板打开“Paint flashing”，拖动页面就能看到伪元素区域高频闪红
- 真实项目中，只要图形数量 ≥ 5 且需动画，就该切回内联 SVG —— 不是教条，是实测帧率掉 12fps 的临界点
怎么判断该用伪元素还是内联 SVG？
看三个硬指标：是否要响应式缩放、是否要 js 动态改颜色/路径、是否要无障碍支持（aria-label 或 <title></title>）。三者占其一，就别硬刚伪元素。
容易被忽略的点：伪元素无法被 getComputedStyle() 正确读取 clip-path 值，调试时你以为路径生效了，其实只是浏览器缓存了旧样式；SVG 的 <path d="..."></path> 却能被 JS 完全掌控。
- 图标类小图形（≤ 24×24px）、无交互、纯视觉点缀 → 伪元素省 http 请求，可以
- 任何需要
stroke-dasharray做描边动画、或要监听click到具体顶点 → 必须 SVG - 设计稿里图形带文字标注、或要适配暗色模式自动反色 → SVG 的
currentColor和<style></style>块更稳