只用一个 HTML 元素可以写出多少形状？—

上一篇章，我们的不规则图形篇发了之后，我一个朋友说我“良心发现”了，不提供新的知识点了，而是实实在在的一些案例直接丢给大家。

的确，前面的每一个篇章，我都有引入新的知识点。

规划这个系列，起初计划是在不规则图形篇中把 clip-path 属性引入进来。但是，其中牵扯到了 SVG 的填充规则，想到我之后会再次做一份完整的 SVG 课程，于是我自作主张在上一篇章将其取消了。

然而，好多朋友都说我“夹带私货”，我冤枉啊/(ㄒoㄒ)/~~……这不，我今天就补上这个序章，把 clip-path 属性也加上了！

一、clip-path 基本语法

clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

1. <clip-source> 值

clip-source 属性使用 url() 引用 SVG 的元素。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <clipPath id="clipPath">
    <path d="M259.8,8.4l9.3,60.3c1.5,9.6,14.3,11.6,18.7,3l27.5-54.4c5.1-10.1,20.5-5.1,18.7,6.1l-9.8,60.2c-1.5,9.5,10.1,15.5,16.9,8.6l43-43.3c8-8.1,21.1,1.4,15.9,11.5l-27.9,54.2c-4.4,8.6,4.8,17.8,13.4,13.4l54.2-27.9c10.1-5.2,19.6,7.9,11.5,15.9l-43.3,43c-6.9,6.8-0.9,18.4,8.6,16.9l60.2-9.8c11.2-1.8,16.2,13.6,6.1,18.7l-54.4,27.5c-8.6,4.4-6.6,17.2,3,18.7l60.3,9.3c11.2,1.7,11.2,17.9,0,19.6l-60.3,9.3c-9.6,1.5-11.6,14.3-3,18.7l54.4,27.5c10.1,5.1,5.1,20.5-6.1,18.7l-60.2-9.8c-9.5-1.5-15.5,10.1-8.6,16.9l43.3,43c8.1,8-1.4,21.1-11.5,15.9l-54.2-27.9c-8.6-4.4-17.8,4.8-13.4,13.4l27.9,54.2c5.2,10.1-7.9,19.6-15.9,11.5l-43-43.3c-6.8-6.9-18.4-0.9-16.9,8.6l9.8,60.2c1.8,11.2-13.6,16.2-18.7,6.1l-27.5-54.4c-4.4-8.6-17.2-6.6-18.7,3l-9.3,60.3c-1.7,11.2-17.9,11.2-19.6,0l-9.3-60.3c-1.5-9.6-14.3-11.6-18.7-3l-27.5,54.4c-5.1,10.1-20.5,5.1-18.7-6.1l9.8-60.2c1.5-9.5-10.1-15.5-16.9-8.6l-43,43.3c-8,8.1-21.1-1.4-15.9-11.5l27.9-54.2c4.4-8.6-4.8-17.8-13.4-13.4l-54.2,27.9c-10.1,5.2-19.6-7.9-11.5-15.9l43.3-43c6.9-6.8,0.9-18.4-8.6-16.9L23.3,334c-11.2,1.8-16.2-13.6-6.1-18.7l54.4-27.5c8.6-4.4,6.6-17.2-3-18.7l-60.3-9.3c-11.2-1.7-11.2-17.9,0-19.6l60.3-9.3c9.6-1.5,11.6-14.3,3-18.7l-54.4-27.5c-10.1-5.1-5.1-20.5,6.1-18.7l60.2,9.8c9.5,1.5,15.5-10.1,8.6-16.9l-43.3-43c-8.1-8,1.4-21.1,11.5-15.9l54.2,27.9c8.6,4.4,17.8-4.8,13.4-13.4l-27.9-54.2c-5.2-10.1,7.9-19.6,15.9-11.5l43,43.3c6.8,6.9,18.4,0.9,16.9-8.6L166,23.3c-1.8-11.2,13.6-16.2,18.7-6.1l27.5,54.4c4.4,8.6,17.2,6.6,18.7-3l9.3-60.3C241.9-2.8,258.1-2.8,259.8,8.4z"/>
  </clipPath>
</svg>
<div></div>

可以看到，我们在 HTML 中插入一个 svg 元素和一个 div 元素。设置 svg 元素的视口为从左上角开始宽 500 且高 500 的范围，并在 svg 元素中声明一个 clipPath 标签，并在里面写入一个 path 标签。对于 path 标签中，我们使用 d 属性写了一个圆角二十角星的路径。

div {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 500px;
  height: 500px;
  background: red;
  clip-path: url(#clipPath);
}

在 CSS 中，我们把 div 元素定位到浏览器中央，控制 div 元素的宽度和高度均为 500px，设置背景色为红色。

设置 clip-path 属性，在 url 方法中使用 ID 选择器定位了 svg 元素中 clipPath 标签的 id 属性。

可以看到，整个 div 元素只显示了圆角二十角星的形状。

2. <basic-shape> 值

basic-shape 是一种表现基础图形的 CSS 数据类型。

当构建一个图形时，运用了 <basic-shape> 值的属性就会定义一个相关的盒模型；

基础图形使用的坐标系统即设置相关的盒模型左上角顶点为原点，该坐标轴的 x 轴正方向为右、y 轴的正方向为下；

所有以百分比定义的长度将通过相关盒模型与使用的维度重定义。

2.1 inset()

inset() 函数定义了一个矩形，其位于参考框的每一边内侧的指定的距离处。

<div></div>

我们的 HTML 中只有一个 div 元素。然后 CSS 中继续直接模板中写属性。

width: 800px;
height: 600px;
background: red;
clip-path: inset(50px);

我们设置 div 的宽度为 800px，高度为 600px，设置背景色为红色。然后直接设置 clip-path 属性的 inset 方法中传入一个 50px 的值。

得到一个普通的矩形，咋一看没有什么特别的。于是我们在浏览器的开发者工具中查看该元素：

我们可以看到，显示出来的矩形比原本我们设置的 div 元素的宽度和高度，每个方向小了 50px。

我们在尝试给 inset 方法设置多个参数：

clip-path: inset(50px 25% 100px 100px);

直接给出通过浏览器的开发者工具中查看的元素：

可以看出来，是按照上右下左的顺时针顺序设置向内的值。

我们继续，引入 round 关键字：

clip-path: inset(50px round 25px);

先看结果：

可以看到，显示矩形距离 div 容器边缘的距离都是 50px，然后显示矩形的四个角都有一个 25px 的圆角。

一个大胆的想法诞生了：

clip-path: inset(50px 25% 100px 100px round 25px 50px 100px 200px);

直接看结果：

可以看到，按照上右下左的顺时针顺序，显示矩形距离 div 容器边缘的距离分别是 50px、25%、100px、100px，然后从显示矩形的左上角开始，也是按照顺时针顺序，每一角的圆角半径分别是 25px、50px、100px、200px。

2.2 circle()

circle() 函数定义了一个圆形，使用半径和位置来描述。

clip-path: circle(100px);

直接设置了一个值，看看效果：

果然，是在正中央显示一个半径为 100px 的圆形。

我们再尝试控制一下圆形的位置：

clip-path: circle(500px at top left);

设置这个圆的圆心位置为左上角。

在半径的设置中，还有两个关键词：

closest-side：使用从形状中心到参照盒子的最近边缘的长度。对于圆形来说，这是任何维度中最近的边缘。

farthest-side：使用从形状中心到参照盒子的最远边缘的长度。对于圆形来说，这是任何维度中最远的边缘。

clip-path: circle(closest-side at 40% 60%);

clip-path: circle(farthest-side at 40% 60%);

2.3 ellipse()

ellipse() 函数定义了一个椭圆，使用水平半径和竖直半径和以及中心位置来描述。其语法和 circle() 函数几乎一样，只是多了一个半径。

clip-path: ellipse(200px 150px);

clip-path: ellipse(400px 300px at top left);

clip-path: ellipse(closest-side closest-side at 40% 60%);

clip-path: ellipse(farthest-side farthest-side at 40% 60%);

clip-path: ellipse(farthest-side farthest-side);

2.4 polygon()

polygon() 函数通过提供一个或多个坐标对（每一个坐标代表形状的一个顶点）来绘制多边形。

clip-path: polygon(400px 0, 600px 200px, 450px 200px, 450px 600px, 350px 600px, 350px 200px, 200px 200px);

每个点是一对坐标值，用空格分隔。

每一个顶点的坐标之间使用逗号分隔，理论上可以写出所有由全部直线构成的形状！

2.5 path()

path() 函数接受 SVG 路径字符串作为参数，用于 CSS 形状和运动路径模块中绘制形状。

clip-path: path('M0,250Q200,200,400,250T600,250V200L800,300L600,400V350 Q600,400,400,350T0,350Z');

看到 path 方法中的值，比较烧脑。

path() 函数中的字符串是 SVG 中 path 的 d 属性，其具体的语法不在这里展开了，将来我会制作一套详细的 SVG 教程，届时大家就完全明白了！

3. <geometry-box> 值

同 basic-shape 一起声明，它将为基本形状提供相应的参考框盒。

margin-box：使用 margin box 作为引用框。

border-box：使用 border box 作为引用框。

padding-box：使用 padding box 作为引用框。

content-box：使用 content box 作为引用框。

fill-box：利用对象边界框（object bounding box）作为引用框。

stroke-box：使用笔触边界框（stroke bounding box）作为引用框。

view-box：使用最近的 SVG 视口（viewport）作为引用框。如果 viewBox 属性被指定来为元素创建 SVG 视口，引用框将会被定位在坐标系的原点，引用框位于由 viewBox 属性建立的坐标系的原点，引用框的尺寸用来设置 viewBox 属性的宽高值。

这里就不设置具体的案例了，留给大家去测试吧！

二、云朵

在上一个篇章的最后，我们在彩虹案例中写了一个小小的云朵，当时我们使用的是伪元素写的两个蛋形拼接而成的，感觉不太划算。那么，今天我们使用 clip-path 属性来写一个云朵吧！

clip-path: path('M250,400A100,50,0,1,1,200,200A150,100,0,1,1,500,200A270,100,0,1,1,550,400A100,50,0,1,1,250,400');

对于云朵，我们直接使用 path 方法，传入四个弧形即可完成。

三、二十角星

我们再来写一下上面的二十角星的形状吧！

clip-path: path('M259.8,8.4l9.3,60.3c1.5,9.6,14.3,11.6,18.7,3l27.5-54.4c5.1-10.1,20.5-5.1,18.7,6.1l-9.8,60.2c-1.5,9.5,10.1,15.5,16.9,8.6l43-43.3c8-8.1,21.1,1.4,15.9,11.5l-27.9,54.2c-4.4,8.6,4.8,17.8,13.4,13.4l54.2-27.9c10.1-5.2,19.6,7.9,11.5,15.9l-43.3,43c-6.9,6.8-0.9,18.4,8.6,16.9l60.2-9.8c11.2-1.8,16.2,13.6,6.1,18.7l-54.4,27.5c-8.6,4.4-6.6,17.2,3,18.7l60.3,9.3c11.2,1.7,11.2,17.9,0,19.6l-60.3,9.3c-9.6,1.5-11.6,14.3-3,18.7l54.4,27.5c10.1,5.1,5.1,20.5-6.1,18.7l-60.2-9.8c-9.5-1.5-15.5,10.1-8.6,16.9l43.3,43c8.1,8-1.4,21.1-11.5,15.9l-54.2-27.9c-8.6-4.4-17.8,4.8-13.4,13.4l27.9,54.2c5.2,10.1-7.9,19.6-15.9,11.5l-43-43.3c-6.8-6.9-18.4-0.9-16.9,8.6l9.8,60.2c1.8,11.2-13.6,16.2-18.7,6.1l-27.5-54.4c-4.4-8.6-17.2-6.6-18.7,3l-9.3,60.3c-1.7,11.2-17.9,11.2-19.6,0l-9.3-60.3c-1.5-9.6-14.3-11.6-18.7-3l-27.5,54.4c-5.1,10.1-20.5,5.1-18.7-6.1l9.8-60.2c1.5-9.5-10.1-15.5-16.9-8.6l-43,43.3c-8,8.1-21.1-1.4-15.9-11.5l27.9-54.2c4.4-8.6-4.8-17.8-13.4-13.4l-54.2,27.9c-10.1,5.2-19.6-7.9-11.5-15.9l43.3-43c6.9-6.8,0.9-18.4-8.6-16.9L23.3,334c-11.2,1.8-16.2-13.6-6.1-18.7l54.4-27.5c8.6-4.4,6.6-17.2-3-18.7l-60.3-9.3c-11.2-1.7-11.2-17.9,0-19.6l60.3-9.3c9.6-1.5,11.6-14.3,3-18.7l-54.4-27.5c-10.1-5.1-5.1-20.5,6.1-18.7l60.2,9.8c9.5,1.5,15.5-10.1,8.6-16.9l-43.3-43c-8.1-8,1.4-21.1,11.5-15.9l54.2,27.9c8.6,4.4,17.8-4.8,13.4-13.4l-27.9-54.2c-5.2-10.1,7.9-19.6,15.9-11.5l43,43.3c6.8,6.9,18.4,0.9,16.9-8.6L166,23.3c-1.8-11.2,13.6-16.2,18.7-6.1l27.5,54.4c4.4,8.6,17.2,6.6,18.7-3l9.3-60.3C241.9-2.8,258.1-2.8,259.8,8.4z');

直接复制上面的 clipPath 标签中的 path 标签中的 d 属性的值。