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