使用clip-path裁剪图形

推荐（参考文章）

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%);
}