clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。
1.clip-path: polygon(x y,x y,x y,x y); 多边形裁剪
这里的x y 别是坐标点 （0 0）是元素的左上角顶点
image.png
例子：
//css:部分
.box1{
width: 300px;
height: 300px;
background-color: #fd79a8;
clip-path: polygon(0 50%,50% 100%,50% 0%);
}
// html部分：
<div class="box1"></div>
效果
image.png
2. clip-path: circle(r at x y);圆形裁剪
这里的 r 是裁剪的半径，x y 为圆心坐标
例子：
// css 部分
.box2{
width: 300px;
height: 300px;
background-color: #fd79a8;
clip-path: circle(50% at 50% 50%);
}
// html部分
<div class="box2"></div>
效果
image.png
3.ellipse(xr yr at x y); 椭圆形裁剪
这里的 xr 是椭圆x轴半径 yr 是y轴半径，x y 为圆心坐标
例子：
// css部分
.box3{
width: 300px;
height: 300px;
background-color: #fd79a8;
clip-path: ellipse(50% 20% at 50% 50%);
}
// html部分
<div class="box3"></div>
效果
image.png
