学透CSS-25张图熟练掌握clip-path 看完就会！

创作不易 拒绝白嫖 点个赞呗
关注专栏 学透CSS,带你走进CSS的深处！！！

前言

不知道大家在开始学习CSS的时候，会不会经常遇到这样一道问题：如何实现一个三角形。类似这样的代码是不是很眼熟。嗯！看上去不是很复杂，但是代码是不是太多了！

直到CSS3的出现，clip-path带来了新的更简单的实现方式。

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

兼容性

看上去兼容性可能不太好，但是大部分的浏览器都部分支持这个属性。所以我觉得这个属性是可用的。

语法

内联/外部svg

clip-path: url(#c1);
首先我们在body标签种定义一个圆

然后定义一个div

然后在div中

clip-path: url(#myClip);

最后出来的效果就是将div裁剪成一个圆。

下面的是浏览器选中元素的效果。

margin-box| border-box|padding-box| content-box|fill-box|stroke-box|view-box

实测，这几个属性在chrome是不支持的，不过这几个属性基本上也不常用。
下面我们尝试两个例子：
先创建一个div

原图

浏览器选中后的图像

说一下这张图：黄色的是margin，黑色的是边框，深色的是padding，中间绿色是content。

举例1 ：padding-box

clip-path: padding-box;

原图

通过这张原图，我们只能看到黑色的边框不见了。

我们来看一下，浏览器选中后的效果图。可以清晰的看见，padding和content部分是显示出来的

这个例子可能还是不太清晰的表达clip-path干了些啥。那么下面这个例子就比较清晰了。

举例2 ：content-box
原图

通过这张原图，我们只能看到黑色的边框不见了，但是不能看到padding部分是否显示出来了。

我们来看一下，浏览器选中后的效果图。可以清晰的看见，padding跟上面的例子是不一样的颜色，呈现的是紫色，其实这是因为padding,并没有显示出来，被clip-path隐藏了。

inset| circle| polygon|path

inset

语法

inset( <shape-arg> {1,4} [round < border-radius >]? )

首先inset 接收 1到4个单位值，类似padding。

clip-path: inset(20px );

clip-path: inset(20px 50px);

clip-path: inset(20px 50px 100px);

clip-path: inset(20px 50px 100px 50px);

然后inset还接收一个round参数，round参数后面接收1到4个角度值，类似border-radius。

clip-path: inset(20px 50px 100px 50px round 20px );

四个角都是20px

clip-path: inset(20px 50px 100px 50px round 20px 10px );

左上角和右下角是20px

右上角和左下角是10px

clip-path: inset(20px 50px 100px 50px round 20px 10px 50px );

左上角20px

右上角和左下角是10px

右下脚是50px

clip-path: inset(20px 50px 100px 50px round 20px 10px 15px 25px);

inset属性组合比较多，写的时候请注意顺序。

circle

语法：

circle( [ <shape-radius> ]? [at x y ]? )

shape-radius 参数表示 r，即圆的半径。负值无效。此处的百分比值从参考框的使用宽度和高度解析为：sqrt(width2+height2)/sqrt(2)

at 参数定义圆的中心。如果省略，则默认为居中。x是距离左边的位置，y是距离上边的位置。当然你也可以使用类似 at top left这样的方位。

 clip-path: circle(50px at 100px 40px );

ellipse

语法

[ <shape-radius> rx ry ]? [at <position> ]? 

shape-radius 参数依次表示 rx和 ry，椭圆的 x 轴和 y 轴半径。任一半径的负值均无效。此处的百分比值根据宽度（对于 rx 值）和使用高度（对于 ry 值）进行解析。

position 参数定义椭圆的中心。如果省略，则默认为居中。

clip-path: ellipse(50px 20px at 100px 40px );

polygon

语法

[<fill-rule> x y，]

fill-rule 类似svg的填充。
polygon可以接收多个xy坐标。

下面列举几个常见图形的实现

菱形

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

❌

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%
        );