css3的clip-path方法剪裁实现

本例讲解如何通过clip-path把一个div（元素，可以是图片等）裁切成不同的形状，这里以一个div为例宽高均为300px

注意：不支持IE和Firefox，支持webkit浏览器，在现代浏览器中需要使用-webkit-前缀。

<div class="demo" style="width: 300px; height: 300px; margin: auto; background: red;">
</div>
1.裁切为一个三角形或者梯形 使用：polygon裁剪多边形。

.demo{
-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

剪切梯形：坐标顺序为，右上、右下，左下，左上

.demo{
-webkit-clip-path: polygon(100% 0,75% 100%, 25% 100%, 0 0);
}

2.裁切圆 ：创建圆形，需要给circle传入三个值：半径和圆心坐标（x y），用at关键字来定义圆心坐标。

.demo{
-webkit-clip-path: circle(50% at 50% 50%);
}

3.裁切椭圆：创建椭圆，需要给ellipse传入四个值：椭圆的x轴半径、y轴半径以及椭圆圆心(x y)。

.demo{
-webkit-clip-path: ellipse(30% 20% at 50% 50%);
}

4.再说下裁切的：矩形裁切，边缘裁切用到的 inset（对应的是距上，距右，距下，距左的位置）

.demo{
-webkit-clip-path: inset(100px 50px 50px 50px);
}

小实例：裁切一个圆角 inset(<top> <right> <bottom> <left> round <top-radius> <right-radius><bottom-radius> <left-radius>)

-webkit-clip-path: inset(25% 0 round 0 25%);

---------------------
作者：yufengaotian
来源：CSDN
原文：https://blog.csdn.net/yufengaotian/article/details/80594461
版权声明：本文为博主原创文章，转载请附上博文链接！