创作不易 拒绝白嫖 点个赞呗
关注专栏
学透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
右下脚是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%
);