clip-path 是纯 CSS 声明裁剪路径的属性，不引入外部形状；按需选用 circle()、ellipse()、inset() 或 polygon() 等函数，其中 polygon() 最灵活常用，响应式推荐全用百分比单位，注意元素需满足块级/脱离文档流等生效前提。
clip-path 不是“引入”形状，而是直接用 CSS 函数声明裁剪路径。它不依赖外部文件（除非你主动用 url() 引用 SVG），绝大多数场景下，写一行函数就生效。
clip-path 基本函数怎么选？看形状需求定
不用死记所有语法，按你要的图形选对应函数：
-
circle()：头像、加载环、圆形按钮——圆心位置 + 半径，例如clip-path: circle(50% at center) -
ellipse()：椭圆徽章、横向进度条遮罩——两个半径 + 中心点，如clip-path: ellipse(60% 40% at 50% 50%) -
inset()：唯一能“向内挖矩形”的函数，适合卡片圆角+内阴影、带圆角的蒙版，例如clip-path: inset(10px 20px 30px 40px round 8px) -
polygon()：最常用也最灵活，做箭头、斜角标签、梯形、菱形、不规则边框都靠它；坐标系是左上角为0% 0%，x 向右、y 向下，例如右向箭头：clip-path: polygon(0% 0%, 100% 50%, 0% 100%)
别用 path() 写简单图形——Safari 对它的支持直到 15.4 才稳定，且调试成本高；polygon() 足够覆盖 90% 的 UI 需求。
为什么写了 clip-path 却没效果？常见失效原因
不是代码写错，大概率是元素不满足生效前提：
立即学习“前端免费学习笔记（深入）”；
- 目标元素必须是块级盒或脱离文档流：
display至少为block或inline-block；position为absolute、fixed或relative（后者需配合z-index或触发层叠上下文） - 别在
<table>或<td>上直接用——浏览器对表格单元格的clip-path支持极差；包一层<div>再裁剪 - 百分比坐标（如
polygon(50% 0%, 100% 50%)）依赖父容器有明确宽高；若父容器高度由内容撑开，百分比会按初始包含块（通常是视口）计算，结果错位 - Safari 对
polygon()中空格敏感：写成polygon(0% 0%,100% 50%,0% 100%)（逗号后不留空格）更稳妥
加个 outline: 1px solid red 看元素是否真被渲染出来，比反复改 clip-path 更快定位问题。
裁剪后点击区域变小或失效？记得重置 pointer-events
部分浏览器（尤其是旧版 Safari 和 Chrome）在应用 clip-path 后，会把裁剪区域外的 pointer events 自动设为 none，导致按钮点不中、hover 失效。
显式加一句即可修复：
button {
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
pointer-events: auto;
}注意：pointer-events: auto 是默认值，但某些 UA 样式或继承链可能覆盖它；不要依赖隐式行为。
响应式 polygon 怎么写才不崩？只用百分比，禁用 px 混用
想让三角形箭头随容器缩放？所有坐标必须统一单位：
- ✅ 正确：
clip-path: polygon(0% 0%, 100% 50%, 0% 100%)—— 宽高变化时比例保持 - ❌ 错误：
clip-path: polygon(0 0, 200px 50%, 0 100%)—— 混用单位，缩放时变形
如果必须用固定尺寸（比如图标内嵌小三角），优先考虑伪元素 + transform: rotate()，而不是硬塞 px 到 polygon() 里——后者在高 DPI 屏或缩放页面下极易错位。
真正难的不是写对函数，而是理解裁剪发生在绘制阶段，不改变盒模型、不影响布局流、也不影响子元素的定位基准——这些边界条件，决定了它能做什么、不能做什么。
