使用 clip-path 绘制多种图形

clip-path 基本介绍

clip-path

是一个CSS属性，剪切路径，允许用不同的剪切方式创建元素的可显示区域，区域内的内容可以展示，区域外的内容则隐藏。
基本语法：

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

。

其中，属性值分四类：

• clip-source 使用类函数 url() 引用 SVG 的 <clipPath> 元素。
• basic-shape 一些基本形状，使用类函数形式创建一个形状，可取值包含：圆形(circle)、椭圆(ellipse)、多边形(polygon)、矩形(inset)、任意路径(path)。
• geometry-box 可选；此属性值必须与 basic-shape 属性值共同作用，为剪切形状提供参考盒子，默认值为 border-box。该属性兼容性存在一定问题，在chrome浏览器下无法正常使用，慎用。
• none 默认值 none，除此外，还有 inherit、initial等CSS全局值。

使用如下，

<divclass="app"></div>

.app{display: inline-block;position: relative;width: 200px;height: 200px;background-color: #333;clip-path:circle(50%);}

以上代码，将给

.app

元素设置一个背景色为黑灰色的圆形的剪切区域：

使用 clip-path 绘制图形

上面代码和图片，展示了一个圆形的形状，基于

clip-path

的形状属性值

basic-shape

。
接下来，首先我们先了解下

basic-shape

的各属性值函数的基本用法：

• 圆形 circle() 接受一个半径长度和圆心位置信息，剪切成圆形
• 椭圆 ellipse() 接受两个半径长度和圆心位置信息，剪切成椭圆
• 多边形 polygon() 接受一组顶点位置信息，剪切成多边形状
• 矩形 inset() 接受 top、right、bottom、left 四个方向的偏移值，还可以设置圆角，剪切成矩形
• 任意路径 path() 接受SVG路径字符串，剪切成不同形状

有了这几种基本的形状函数，我们就可以创建各种各样的图形。

实现一个三角形

使用多边形属性值

polygon

实现一个三角形，只需要设置三个坐标点参数，就可以很方便的创建一个三角形状了。

<divclass="triangle"></div>

.triangle{display: inline-block;position: relative;width: 200px;height: 200px;background-color: #f00;animation: triangle 8s linear infinite;}@keyframes triangle{0%{clip-path:polygon(100px 0px, 200px 200px, 0px 200px);}25%{clip-path:polygon(200px 100px, 0px 200px, 0px 0px);}50%{clip-path:polygon(100px 200px, 0px 0px, 200px 0px);}100%{clip-path:polygon(0px 100px, 200px 0px, 200px 200px);}}

如上代码所示，实现了四个方向的三角形的动画效果，采取的是顺时针旋转四次，依次展示：

以后如果代码要实现三角形角标，就可以使用它了。

除了

polygon

外，使用

path

属性值同样能够实现三角形，下面的代码就是实现了一个三角形：

clip-path:path("M100,0 L0,200 L200,200");

而想要使用

path

实现一个同样的圆形，也可以，代码如下所示：

clip-path:path("M 100 0 A 100 100 0 1 1 100 200 A 100 100 0 1 1 100 0");

实现一个箭头效果

同样是使用多边形属性值

polygon

，设置好箭头所需要的坐标顶点数据，就能够简单的绘制一个箭头。

.arrow{display: inline-block;position: relative;width: 200px;height: 200px;background-color: #f00;clip-path:polygon(40% 0%, 40% 30%, 100% 30%, 100% 70%, 40% 70%, 40% 100%, 0% 50%);}

以上CSS代码，polygon的顶点值使用的百分比的相对值，同样有效，绘制下图所示的箭头：

使用

path

属性值实现箭头同样可以，以下CSS代码就是实现和上图一样的箭头形状：

clip-path:path("M 80 0 L 80 60 L 200 60 L 200 140 L 80 140 L 80 200 L 0 100");

要设置不同的方向，调整顶点坐标值即可。

实现一个 × 符号

使用

×

作为关闭按钮图标符号，也是我们常用的UI样式，也可以通过

clip-path

属性轻松实现该符号形状。

.triangle{display: inline-block;position: relative;width: 20px;height: 20px;background-color: #f00;clip-path:polygon(10% 0%, 0% 10%, 40% 50%, 0% 90%, 10% 100%, 50% 60%, 90% 100%, 100% 90%, 60% 50%, 100% 10%, 90% 0%, 50% 40%);}

仍然是通过多边形进行定义，只要沿着

×

的各个顶点，设置对应的位置信息，效果可见下图：

下面是

path

的实现：

clip-path:path("M 2 0 L 0 2 L 8 10 L 0 18 L 2 20 L 10 12 L 18 20 L 20 18 L 12 10 L 20 2 L 18 0 L 10 8");

形状的实现，就先到这里，反正只要我们愿意花时间，总能通过

clip-path

创建想要的形状，下面我们看下其他的用法。

注意事项

阴影与边框

注意，使用

clip-path

定义形状时，并不会处理

border

边框和

box-shadow

阴影等属性，比如创建圆形时，与

border-radius

的差异就很明显。
下面我们分别实现两个圆形：

.circle{display: inline-block;width: 200px;height: 200px;background-color: #ccc;border: 3px solid red;box-shadow: 0px 0px 10px #00f;}.circle1{clip-path:circle(50%);}.circle2{border-radius: 50%;}

从上图可以看到，
使用

border-radius

时边框阴影都跟随圆形显示完整；
而使用

clip-path

则完全不同，阴影并不展示，边框则也是剪切的方式展示4段。

fixed定位问题

在使用

clip-path

剪切父元素时，如果使用

fixed

定位的内部元素，在脱离了当前父元素的范围后，将无法显示。
同样使用上面的代码，我们在html中做一些改动：

<divclass="circle circle1"><divclass="text">clip-path</div></div><divclass="circle circle2"><divclass="text">border-radius</div></div>

定义文本字符串的css属性，使用

fixed

定位：

.text{position: fixed;top: 230px;}

得到的效果图如下所示，在

clip-path

剪切中将无法显示文本，而

border-radius

则完整显示文本。

动效问题

上文的代码中，我们在三角形的实现中，已经使用了

animation

使用动画效果，表现正常，但需要注意：

• 在一次 @keyframes 设置中，如果使用 clip-path 属性，则他的属性值应该使用同一个函数，即必须都使用 polygon；
• 不能一个时间段使用 polygon 另一个时间段使用 path，如果这样做，将没有动画效果。

即下面这种写法是不被允许的：

/** polygon 函数与 path 函数同在一个动效中使用，将不会有动画效果，只会生硬的切换 */@keyframes triangle{0%{clip-path:polygon(100px 0px, 200px 200px, 0px 200px);}50%{clip-path:path("M 200 100 L 0 200 L 0 0");}}

使用

transition

处理动效也会存在同样的问题，下面我们看一个具体的示例。

<imgclass="img"src="../css项目/animate.jpg"/>

.img{clip-path:circle(50%);transition: all 1s;}.img:hover{clip-path:circle(100%);}

当我们在正常状态下使用

circle

剪切一个圆形以后，

hover

状态下也使用该函数，则效果正常：

但是，当我们在

hover

状态下使用

none

或其他函数时，则没有动效，直接切换：

.img:hover{clip-path: none;}

如上图所示，与前面正常动效相比，这次就是直接切换状态，没动画效果。

clip-path 的其他用法

使用

clip-path

属性除了可以创建不同的形状以外，还可以在其他方面使用，如作为图片裁剪框、隐藏页面元素等等。

图片裁剪框

图片裁剪的具体实现，之前博文已有介绍，当时的实现方式，就是使用

clip-path

属性来定义的图片裁剪框，并且使用在JavaScript中动态修改定位位置信息来实时修改裁剪框的尺寸和位置信息。
具体的代码，详见 一步步实现裁剪功能。

隐藏页面元素

根据上面的对

clip-path

属性的了解，我们知道在剪切形状区域内的内容是可见的，在剪切区域外的内容不可见。
如果我们把设置一个元素的剪切区域为0，则该元素的所有内容都将在区域外，即是不可见的，在实现上也非常简单。

clip-path:circle(0%);clip-path:inset(50%);clip-path:polygon(0 0);

使用不同的形状函数值，只要保证没有剪切区域就行。
当然，这种方式的隐藏，元素仍然会占据在页面上的当前空间，只是在视觉上看不见。