CSS clip-path 完全指南：异形剪裁 + 动画 + SVG 引用

clip-path 用一个剪裁区域定义元素的可见范围，区域外的内容被裁剪掉（透明）。五个核心函数：

clip-path: circle(50%);                    /* 圆形，半径 50% */
clip-path: ellipse(30% 50%);              /* 椭圆，x/y 半径 */
clip-path: polygon(0 0, 100% 0, 50% 100%); /* 三角形，坐标列表 */
clip-path: inset(10px 20px);              /* 矩形内缩，距离四边 */
clip-path: path('M0 0 L100 0 L50 100 Z'); /* SVG 路径，完全自由 */

其中 polygon 和 path 最强大，可以绘制任意形状。circle 和 ellipse 的百分比相对于容器尺寸（宽或高的较小值）。inset 用于"微调"矩形边界，通常与媒体查询配合。

掌握 polygon 就能实现 95% 的异形需求。坐标系从左上角 (0, 0) 开始，百分比表示相对容器宽高。

五边星： `` clip-path: polygon( 50% 0%, 61% 35%, 100% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 0% 35%, 39% 35% ); ``

心形： `` clip-path: polygon( 50% 100%, 0% 38%, 0% 0%, 35% 0%, 50% 20%, 65% 0%, 100% 0%, 100% 38% ); ``

工具推荐：用在线 clippy（polished.js 作者的工具）逐点可视化，调完再复制到代码。坐标多的时候用生成器省时间。

clip-path 可以动画化，通过逐帧改变坐标，实现类似撕开纸张的视觉效果。

@keyframes tear {
  0% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }
  50% { clip-path: polygon(0% 0%, 50% 20%, 50% 80%, 0% 100%); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}
.element { animation: tear 1s ease-in-out; }

从左边界逐渐撕开到完全显示。关键是每帧的坐标数量必须相同，否则浏览器无法插值。设置三角形 → 四边形 → 完整矩形，每个形状都是四边形（即使有些点重合）。

在 SVG 中定义复杂的剪裁路径，然后在 CSS 中引用，可以复用同一个路径。

<svg style="display: none">
  <defs>
    <clipPath id="myClip" clipPathUnits="objectBoundingBox">
      <circle cx="0.5" cy="0.5" r="0.4" />
    </clipPath>
  </defs>
</svg>

<style> .element { clip-path: url(#myClip); } </style> ```

objectBoundingBox 使坐标相对于元素的边界框（0-1 之间），userSpaceOnUse 则是绝对像素。反向也行：SVG 内的元素用 <image clip-path="url(#myClip)"> 直接引用 SVG 定义。这样设计系统可以一份 SVG 定义、多处 CSS 复用。

两个都能隐藏元素的一部分，但机制完全不同。

clip-path：用几何形状硬切割，区域外完全透明，不能渐变。性能好。

mask：用图像的透明度通道作为遮罩。黑色部分隐藏，白色显示，灰色半透明。可以实现渐变、柔和边界。

.element-clip { clip-path: circle(50%); }              /* 硬边界圆形 */
.element-mask { mask-image: radial-gradient(...); }    /* 柔和渐变边界 */

选择标准：需要硬的几何边界（星形、三角形）→ clip-path；需要柔和过渡或复杂效果（渐隐边界、光晕）→ mask。

clip-path 在现代浏览器性能很好，因为它是 GPU 加速的。但要注意移动端细节。

兼容性：circle、ellipse、polygon、inset 在所有现代浏览器支持（包括移动 Safari）；path() 函数支持率较低（Chrome 88+），需要 fallback；url() 引用 SVG clipPath 在 iOS Safari 12+ 才支持。

性能建议： - clip-path 改变时不会重排，只是重绘（GPU 加速），性能远优于 border-radius 或图片裁剪。 - 避免频繁改变 clip-path（每帧）；如需动画，用 will-change: clip-path 提示浏览器。 - polygon 坐标数越少越快，复杂形状考虑用 path SVG 路径。

移动端：clip-path 在低端 Android 设备可能掉帧，测试时留意。

结合以上知识，构建一个悬停时"展开"的异形按钮：

<button class="morph-btn">Hover me</button>

<style> .morph-btn { clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); transition: clip-path 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 12px 24px; color: white; border: none; cursor: pointer; } .morph-btn:hover { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } </style> ```

默认是梯形，悬停时变成完整矩形。用 cubic-bezier 弹簧曲线让展开更有趣。这样的交互用传统 border-radius 完全做不到。