clip-path 屬性使用裁剪方式創(chuàng)建元素的可顯示區(qū)域。區(qū)域內的部分顯示，區(qū)域外的隱藏?？梢灾付ㄒ恍┨囟ㄐ螤?。

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