简介

Clip-Path是一个非常有趣的属性，它允许剪裁SVG元素、图像或任何HTML元素的可见部分。

使用Clip-Path定义基本形状

剪辑路径 使得使用多边形、椭圆、圆或插入关键字剪裁基本形状变得很容易，这些关键字都是css exclusion模块的一部分。

多边形

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

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

 1/* Triangle */
 2.polygon1 {
 3  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 4  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 5}
 6/* X */
 7.polygon2 {
 8  -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%);
 9  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%);
10}
11/* Star */
12.polygon3 {
13  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
14  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
15}

圈

圆的定义是这样的：circle（radius at posX posY)。该位置是可选的，将默认为50% 50%。下面举两个例子来说明：

1.circle {
2  -webkit-clip-path: circle(50%);
3  clip-path: circle(50%);
4}
5.circle2 {
6  -webkit-clip-path: circle(70% at 70% 20%);
7  clip-path: circle(70% at 70% 20%);
8}

椭圆

椭圆是使用以下语法定义的：Ellipse(RadiusX RadiusY At PosX Posy)。同样，该职位是可选的，将默认为50%-50%。这里有两个例子：

1.ellipse {
2  -webkit-clip-path: ellipse(50% 35%);
3  clip-path: ellipse(50% 35%);
4}
5.ellipse2 {
6  -webkit-clip-path: ellipse(50% 65% at 70% 50%);
7  clip-path: ellipse(50% 65% at 70% 50%);
8}

Inset

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

1.inset {
2  -webkit-clip-path: inset(20% 25% 20% 10%);
3  clip-path: inset(20% 25% 20% 10%);
4}
5.inset2 {
6  -webkit-clip-path: inset(45% 0% 33% 10% round 10px);
7  clip-path: inset(45% 0% 33% 10% round 10px);
8}

动画和过渡

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

Animate!

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

 1.trigger-btn:hover + img {
 2  animation: magic 4s infinite;
 3}
 4
 5@keyframes magic {
 6  0% {
 7    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
 8    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
 9  }
10  20% {
11    -webkit-clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
12    clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
13  }
14  40% {
15    -webkit-clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
16    clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
17  }
18  60% {
19    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
20    clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
21  }
22  80% {
23    -webkit-clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
24    clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
25  }
26  100% {
27    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
28    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
29  }
30}

自定义SVG形状

您还可以定义任意SVG形状作为剪辑路径值。您显然希望从Sketch)这样的工具开始创建形状，然后将SVG标记复制到文本编辑器中。在您的SVG标记中，只需将您的形状包装在一个剪辑路径元素中，并将剪辑路径 包装在一个Defs块中。

例如：

1<svg width="0" height="0">
2  <defs>
3    <clipPath id="my-shape">
4      <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">
5      </path>
6    </clipPath>
7  </defs>
8</svg>

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

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

额外资源

Clippy，一个帮助您定义剪辑路径值的好工具。 *浏览器支持： 截至2020年，[clip-path在全球浏览器中的覆盖率为95%](http：//caniuse.com/# feat=css-clip-path)，但请确保包含-webkit-clip-path前缀变体，Safari仍然需要这些变体。

使用 CSS 中的 clip-path 进行剪切简介

简介

使用Clip-Path定义基本形状

多边形

圈

椭圆

Inset

动画和过渡

自定义SVG形状

额外资源