CSS 中的 clip-path 裁剪形状

.blob-mask {
  width: 300px;
  height: 300px;
  background: coral;
  clip-path: url(#blobClip);
}

使用 SVG 路径时，注意坐标系统默认是 userSpaceOnUse，若需要根据元素缩放，可将 clipPath 设置为 clipPathUnits="objectBoundingBox" 并将路径坐标归一化到 0~1 范围。

参考框与坐标系统

clip-path 的定位基于参考框（Reference Box）。默认值是 border-box，但你可以显式指定：

• clip-path: circle(50% at center) border-box; （默认）
• clip-path: circle(50% at center) padding-box;
• clip-path: circle(50% at center) content-box;
• clip-path: circle(50% at center) margin-box;

百分比半径和位置是相对于所选参考框的尺寸计算的。对于大多数情况，保持默认 border-box 就足够了。

动画与过渡

只要形状函数类型一致（例如都是 circle() 或都是 polygon() 且点数相同），就能平滑过渡。

.animated-shape {
  clip-path: circle(30% at 20% 50%);
  transition: clip-path 0.4s ease;
}

.animated-shape:hover {
  clip-path: circle(50% at 50% 50%);
}

对于多边形，只要顶点数量不变，可以在两个 polygon() 之间过渡，实现形状变形的动画。此外，配合 @keyframes 还可以创建循环动画。

@keyframes morph {
  0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  50% { clip-path: polygon(20% 10%, 80% 0, 100% 90%, 0 80%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

.morphing-box {
  animation: morph 3s infinite alternate;
}

实用技巧与创意玩法

1. 图像遮罩与悬停效果

用 clip-path 结合 transform 制作图片退出或呈现效果。

.image-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s;
}
.container:hover .image-reveal {
  clip-path: inset(0 0 0 0);
}

2. 文本裁剪与装饰性背景

文本元素的 clip-path 能创造出“缺角”的字母效果，但注意可能需要保留透明背景。

3. 制作图标或分隔线

配合 polygon() 可以纯 CSS 生成三角形、箭头、波浪形分割线。

4. 响应式形状

尽量使用百分比坐标，让裁剪形状随元素缩放而自动适应。比如 polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%) 会在底部切出一个尖角，宽度变动时也能保持比例。

浏览器兼容性与回退方案

• 良好支持：现代浏览器均支持基本的形状函数和 SVG clipPath。
• 回退建议：在不支持的浏览器中，元素会完整显示（无裁剪）。如果这是不可接受的，可以采用 @supports 查询提供降级样式。

.card {
  /* 默认无裁剪，降级背景 */
  background: #eee;
}

@supports (clip-path: polygon(0 0)) or (-webkit-clip-path: polygon(0 0)) {
  .card {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    background: linear-gradient(135deg, #667eea, #764ba2);
  }
}

对于 IE 和老 Edge，可能需要依赖 SVG 降级或直接放弃裁剪效果。

常见问题自查

• 裁剪后为何元素仍占位置？ 正常，clip-path 只影响视觉，不改变盒模型。如需隐藏流动性，用 display:none 或 visibility:hidden。
• 阴影或边框被裁掉了？ 因为阴影和边框在元素盒子的外部绘制，而 clip-path 默认只裁剪元素自身。可将阴影应用于内部元素或使用 filter: drop-shadow()。
• 动画不流畅？ 确保两个关键帧使用同种形状函数且顶点数一致。复杂 SVG 路径动画可能无法过渡，需用其他方式实现。

动手试一试

尝试修改以下代码，体验 clip-path 的即时反馈：

<div style="width: 200px; height: 200px; background: #ff6b6b; clip-path: polygon(50% 0%, 100% 100%, 0% 100%);"></div>