【CSS】clip-path裁剪路径
clip-path
这次，我们一起来学习一下CSS中的
clip-path属性：裁剪路径
clip-path可用于裁剪各种形状，并将裁剪出来的形状应用于元素的可视区域，这样元素将会呈现出clip-path裁剪后的形状该属性使用的属性值主要包括三类
本文主要介绍
basic-shape属性值的使用方式，其它两种仅作简单介绍clip-source：表示引用外部资源进行裁剪geometry-box：表示使用盒模型属性对元素进行裁剪basic-shape：表示使用自带的函数来绘制裁剪图形
（1）clip-source
作用：引入外部路径来绘制裁剪路径
语法：
clip-path: url()通过
url()来进行引入SVG元素，并按照SVG的路径进行裁剪使用：略
（2）geometry-box
作用：通过设置引用框来确定裁剪边缘
语法：
clip-path: <geometry-box>margin-box、border-box、padding-box、content-box、fill-box、stroke-box、view-box、none使用：略
（3）basic-shape
作用：使用形状函数来绘制裁剪路径
语法：
clip-path: <basic-shape>circle：裁剪圆形ellipse：裁剪椭圆形inset：裁剪矩形polygno：裁剪多边形使用：
语法：
clip-path: polygon(x1 y1, x2 y2, ...)使用：
/* 三角形 */ .box1 { width: 100px; height: 100px; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); background-color: #000; } /* 菱形 */ .box2 { width: 100px; height: 100px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background-color: #000; } /* 五角形 */ .box3 { width: 100px; height: 100px; clip-path: polygon( 50% 0, 65% 40%, 100% 40%, 72% 60%, 85% 100%, 50% 75%, 15% 100%, 28% 60%, 0 40%, 35% 40% ); background-color: #000; } 复制代码x1、y1表示第一个点的坐标x2、y2表示第二个点的坐标polygon可以接收多个(x,y)坐标，以此类推，可以使用这个属性绘制任何形状语法：
clip-path: inset()其效果也同
border-radius，为矩形区域设置圆角设定一个值
x，表示矩形区域距离上下左右的距离都是x设定两个值
x y，表示矩形区域距离上下的距离为x，左右的距离为y设定三个值
x y z，表示矩形区域，上边距为x，下边距为z，左右边距相同为y设定四个值
x y z p，表示矩形区域的上下左右边距分别为x y z p.box1 { width: 100px; height: 100px; clip-path: inset(10px); background-color: #000; } .box2 { width: 100px; height: 100px; clip-path: inset(10px 20px); background-color: #000; } .box3 { width: 100px; height: 100px; clip-path: inset(10px 20px 30px); background-color: #000; } .box4 { width: 100px; height: 100px; clip-path: inset(10px 20px 30px 40px); background-color: #000; } 复制代码属性值同
margin、padding的属性值设置方式一致此外，
inset()还支持round属性值，属性值设置方式同border-radius（略，同上）.box1 { clip-path: inset(10px round 5px); } .box2 { clip-path: inset(10px 20px round 5px 10px); } .box3 { clip-path: inset(10px 20px 30px round 5px 10px 15px); } .box4 { clip-path: inset(10px 20px 30px 40px round 5px 10px 15px 20px); } 复制代码语法：
clip-path: ellipse(rx ry at x y)使用：
.box2 { width: 100px; height: 100px; clip-path: ellipse(20px 40px at center center); background-color: #000; } 复制代码必须的，可以相同，相同则为圆形
rx表示椭圆的X轴方向上的半径，ry表示椭圆的Y轴方向上的半径其它参数同
circle的参数语法：
clip-path: circle(r at x y)使用：
.box { width: 100px; height: 100px; clip-path: circle(40% at center center); background-color: #000; } 复制代码初始坐标
(0,0)从元素的左上角开始计算属性值可以是具体的数值，如
px、%，百分比值以元素的宽高为基准也可以是方位名词，如
top、left、center，缺省默认为center半径必传，也可以只传半径，圆心默认居中
r表示圆的半径at表示定义圆心的参数x表示圆心的X坐标y表示圆心的Y坐标属性值：
裁剪圆形
裁剪椭圆形
裁剪矩形
裁剪多边形
作者：Ruovan
链接：https://juejin.cn/post/7028174453095792647