css3 属性 clip-path

1.用clip-path 将图片切割为圆,为正方形  参数半径和圆心坐标（x y），用at关键字来定义圆心坐标。

.box{
    width:100px;
    height:100px;
    background:blue;  
    clip-path: circle(50% at 50% 50%);  
}

2.切割为一个三角形,polygon(多边形)三组坐标 分别代表三个位置从左下角开始,上部中间,到右下角

.box{
    width:100px;
    height:100px;
    background:blue;  
    clip-path: polygon(0 100%, 50% 0, 100% 100%);/*正三角*/
　　/*clip-path: polygon(0 0, 50% 100%, 100% 0); !*倒三角*!*/
}

3.切割一个平行四边形,注意顶点的位置,否则会切出比较奇怪的图形

.box{
    clip-path: polygon(0 100%,20% 0, 100% 0,  80% 100%); /*平行四边形*/
}

4.那就来一个正常切割的吧,将图片上面切割20px,,右侧切割10px,左边切割38px,底部不进行切割

.box{
  clip-path: inset(20px 10px 0 38px);
}

 5.切割椭圆,前面的两个参数为椭圆的半径,后面的为椭圆的中心

.box{
   clip-path: ellipse(65px 30px at 128px 95px);  
}