介绍

clip-path是一个非常有趣的属性，它允许真正剪切 SVG 元素、图像或任何 HTML 元素的可见部分。

使用 clip-path 定义基本形状

clip-path可以很容易地使用polygon、ellipse、circle或inset关键字中的任何一个来裁剪基本形状，这些关键字是CSS 排除模块的一部分。

多边形

Polygon 是所有可用形状中最灵活的，因为它允许您指定任意数量的点，有点像SVG path。提供的点是成对的 X 和 Y 坐标，可以是任何单位（例如：基于像素或百分比）。因为它是最灵活的，它也是最复杂的，您可能想要使用工具来定义您的点。

让我们用一个例子来说明。首先，您将看到我们的起始图像，然后是应用剪切路径的图像以获得三角形，然后是更复杂的 X 形，最后是星形：

/* Triangle */
.polygon1 {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* X */
.polygon2 {
  -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
/* Star */
.polygon3 {
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

圆圈

圆用以下语法定义：circle(radius at posX posY)。该位置是可选的，默认为50% 50%。下面举两个例子来说明：

.circle {
  -webkit-clip-path: circle(50%);
  clip-path: circle(50%);
}
.circle2 {
  -webkit-clip-path: circle(70% at 70% 20%);
  clip-path: circle(70% at 70% 20%);
}

椭圆

椭圆使用以下语法定义：ellipse(radiusX radiusY at posX posY)。再一次，位置是可选的，默认为50% 50%。这里有两个例子：

.ellipse {
  -webkit-clip-path: ellipse(50% 35%);
  clip-path: ellipse(50% 35%);
}
.ellipse2 {
  -webkit-clip-path: ellipse(50% 65% at 70% 50%);
  clip-path: ellipse(50% 65% at 70% 50%);
}

插图

使用插图，您可以定义一个内部矩形，外部的所有内容都将被切除。这使得直接在浏览器中有效地裁剪图像或元素变得容易。您还可以使用round关键字和边框半径值使矩形圆角：

.inset {
  -webkit-clip-path: inset(20% 25% 20% 10%);
  clip-path: inset(20% 25% 20% 10%);
}
.inset2 {
  -webkit-clip-path: inset(45% 0% 33% 10% round 10px);
  clip-path: inset(45% 0% 33% 10% round 10px);
}

动画和过渡

动画和过渡也可以与剪辑路径一起应用以创建有趣的效果。只需确保动画中的所有步骤都包含相同数量的点。让我们用一个例子来演示：

这是用于创建此动画的 CSS 规则：

.trigger-btn:hover + img {
  animation: magic 4s infinite;
}

@keyframes magic {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  20% {
    -webkit-clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
    clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
  }
  40% {
    -webkit-clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
    clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
  }
  60% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
    clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
  }
  80% {
    -webkit-clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
    clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

自定义 SVG 形状

您还可以定义任意任意 SVG 形状作为剪辑路径值。显然，您会希望使用Sketch 之类的工具来创建形状，然后将 SVG 标记复制到文本编辑器中。在您的 SVG 标记中，只需将您的形状包裹在一个clipPath元素中，并将该clipPath包裹在一个defs块中。

例如这样的事情：

<svg width="0" height="0">
  <defs>
    <clipPath id="my-shape">
      <path d="M89.6342913,129 C86.6318679,137.611315 85,146.865086 85,156.5 C85,200.767808 119.448105,236.989829 163,239.821749 L163,300 L300,300 L300,163 L251.750745,163 C251.915896,160.855015 252,158.687329 252,156.5 C252,110.384223 214.615777,73 168.5,73 C146.712501,73 126.873981,81.3445721 112.006052,95.0121046 L64.5,0 L0,129 L89.6342881,129 Z">
      </path>
    </clipPath>
  </defs>
</svg>

现在您可以使用url关键字和SVG 形状的id将定义的形状应用为剪辑路径值：

.svg-shape {
  -webkit-clip-path: url(#my-shape);
  clip-path: url(#my-shape);
}

---

其他资源

• Clippy，一个很好的工具，可帮助您定义剪辑路径值。
• 浏览器支持：截至 2020 年，在全球浏览器中的clip-path覆盖率为95%，但请务必包含-webkit-clip-pathSafari 仍然需要的前缀变体。