不规则多边形绘制（切角效果、任意效果） css clip-path使用

clip-path可以裁切很多种不同形状的图形，这里讲clip-path 中polygon（）函数属性

切角效果

<div id="demo">div>
<style>
#demo{
width:100px;
height:200px;
background:red;
clip-path: polygon(15px 0 , 100% 0, 100% 100%, 0 100%,0 15px)
}
style>

效果图：

如图所示： polygon(15px 0 , 100% 0, 100% 100%, 0 100%,0 15px)其实代表了5个点
其中有5组坐标
15px 0 代表图中序号1
100% 0 代表图中序号2
100% 100% 代表图中序号3
0 100% 代表图中序号4
0 15px 代表图中序号5
注意：确定好点后，根据点的顺序连接，打乱顺序就会得到其他图形。