推荐（参考文章）
clip-path介绍
利用 clip-path 实现动态区域裁剪
基本内容
clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切 clip属性。
常用属性值
clip-source ： 用 URL 表示剪切元素的路径basic-shape：将元素裁剪为基本形状：矩形（inset ）、圆形（circle）、椭圆（ellipse）、多边形（polygon）margin-box：使用外边距框作为引用框，应该是从外边距开始裁剪border-box：使用边框作为引用框，从边框开始裁剪padding-box：使用内边距框作为引用框，从内边距开始裁剪content-box：使用内容框作为引用框none：默认设置，没有裁剪
备注：有的浏览器可能不兼容，自己加一下浏览器标识
矩形
inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round 可选，圆角）
.juxing{width: 50px;height: 40px;background: red;clip-path: inset(25% 20% 25% 0% round 0 25% 0 25%);}
通过round关键字来指定圆角，顺序也是顺时针（上右下左）
圆形
circle(半径 at 圆心位置) ，半径支持百分比
//圆形.yuanxing{width: 50px;height: 40px;background: red;clip-path: circle(30% at 25px 20px);}
椭圆
ellipse(x轴半径 y轴半径 at 圆心) 半径支持百分比
//椭圆.tuoyuan{width: 50px;height: 40px;background: red;clip-path: ellipse(50% 30% at 25px 20px);}
多边形
polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )<fill-rule>可选，表示填充规则用来确定该多边形的内部。可能的值有nonzero和evenodd,默认值是nonzero.后面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点以矩形的左上角为例，左上角的点是(0% 0%) ，左下角的点是（0% 100%）通过设置点的位置来实现裁剪，不同点直接用逗号分隔点的位置按照顺时针的顺序排列平行四边形
之前做过平行四边形，用的是transform: skewX(45deg);，现在也可以通过裁剪来实现
.pxsbx{width: 50px;height: 40px;background: red;clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);}
直角三角形
//直角三角形.zjsjx {width: 50px;height: 40px;background: red;clip-path: polygon(0% 0%, 100% 100%, 0% 100%);}
直角梯形
//直角梯形.zjtx {width: 50px;height: 40px;background: red;clip-path: polygon(0% 0%, 40% 0%, 100% 100%, 0% 100%);border-top-left-radius: 20%;}
通过border-radious还可以添加上圆角，但是这种方式有局限，等以后找到方法再进行补充
其他多边形不介绍了，可以自己试一下。
结合css过度属性和动画属性
.outer{width:100px;height: 100px;background:orange;clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);transition:0.5s clip-path;}.outer:hover{clip-path:polygon(0 0,0 0,100% 0,100% 0,100% 100%,100% 100%,0 100%,0 100%);}
