本例讲解如何通过clip-path把一个div（元素，可以是图片等）裁切成不同的形状，这里以一个div为例宽高均为300px
注意：不支持IE和Firefox，支持webkit浏览器，在现代浏览器中需要使用-webkit-前缀。
## 注意 clip-path 从右上开始顺时针旋转切割
<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%);
