纯css的::before/after可画三角形、梯形、五边形、箭头、对话气泡、菱形徽章等非自交多边形，依赖border技巧或clip-path: polygon()实现，但不支持镂空、曲线及动态响应。
before/after能画哪些几何图形
纯 CSS 的 ::before 和 ::after 本质是两个可样式化的伪元素，它们没有内容、不占 dom，但可以设置宽高、边框、旋转、裁剪、渐变——只要不依赖 JavaScript 或额外 HTML，绝大多数非自交多边形（三角形、梯形、五边形、箭头、对话气泡、菱形徽章）都能靠这两个伪元素 + transform + border 技巧实现。
关键限制在于：不能有镂空、不能有曲线（除非用 clip-path 或 mask，但兼容性掉一截）、不能动态响应尺寸变化（除非配合 aspect-ratio 或容器查询）。真正“复杂”的图形（比如星形、六芒星、带缺口的环）往往得叠加多个伪元素或用 clip-path: polygon() 配合坐标计算。
用 border 技巧画三角形和梯形最稳
这是最经典也最兼容的方案，原理是利用 border 渲染时相邻边交汇形成的斜角。只要把元素宽高设为 0，只留一个方向的 border，就能得到纯色三角形。
-
border-top非零 + 其他 border 为0→ 向下的三角形 -
border-left和border-bottom非零 → 左下角直角梯形（常用于对话框尾巴） - 要等腰三角形？四个 border 中两个对边设相同值，另两边为
0；比如border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #333; - 注意：IE8+ 支持，但 border 颜色必须明确指定，
transparent在旧版 safari 里可能渲染异常，建议用rgba(0,0,0,0)
clip-path: polygon() 是画任意多边形的底线方案
当 border 技巧不够用（比如需要五边形、平行四边形、不规则箭头），clip-path: polygon() 是更直接的选择。它接受一组百分比或像素坐标，按顺序连线并裁剪内容区域。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 坐标系原点在元素左上角，
0% 0%是左上，100% 100%是右下 - 写法示例：
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 50% 100%, 0% 50%);→ 一个顶部朝上的五边形 - firefox / chrome / Safari（v15.4+）支持良好，但 IE 完全不支持；如需降级，得用 SVG 或 js 插入 fallback
- 别直接在
::before上用clip-path后再加transform，某些浏览器会错位；优先让伪元素本身定位好，再整体裁剪
伪元素叠加时 z-index 和定位容易出错
想画带边框的菱形徽章？常见做法是：主元素画菱形（transform: rotate(45deg)），::before 画内层，::after 画外圈边框。这时候最容易翻车的是层级和尺寸同步问题。
- 伪元素默认
position: Static，必须显式设position: absolute才能精确定位 -
z-index只对定位元素生效，且父容器需有position: relative建立新的层叠上下文，否则z-index无效 - 用
top/left百分比定位时，如果父元素没设宽高，50%会按视口算，不是按父元素 —— 务必给父容器设width和height或aspect-ratio - 旋转后宽高会变，
transform-origin默认是中心点，但如果你用top left旋转，后续left/top偏移就难算，统一用transform-origin: center更可控
复杂图形真正卡住人的地方，从来不是“能不能画出来”，而是“改一个参数后整个结构偏移、裁剪错位、层级反了”。动手前先用 outline: 1px solid red 框出每个伪元素的真实边界，比反复猜坐标快得多。