用CSS3的clip-path样式进行图片的裁剪

1.兼容性

不支持IE和Firefox，支持webkit浏览器。注意，在现代浏览器中需要使用-webkit-前缀。

2.使用方法

1.裁剪三角形

元素的左上角为（0 0）；polygon裁剪多边形。

.clipClass{

-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);

}

2.裁剪圆形

创建圆形，需要给circle传入三个值：半径和圆心坐标（x y），用at关键字来定义圆心坐标。

.clipClass{

-webkit-clip-path: circle(50% at 50% 50%);

}

3.裁剪椭圆

创建椭圆，需要给ellipse传入四个值：椭圆的x轴半径、y轴半径以及椭圆圆心(x y)。

.clipClass{

-webkit-clip-path: ellipse(30% 20% at 50% 50%);

}

4.裁剪插图

使用inset传入四个值，对应“上 右 下 左”的顺序来设置圆角半径。

.clipClass{

-webkit-clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);

}

上面的各个值分别对应为：

inset(<top> <right> <bottom> <left> round <top-radius> <right-radius><bottom-radius> <left-radius>)

其简写形式：

.clipClass {

  -webkit-clip-path: inset(25% 0 round 0 25%);

}

5.动画切换

   .clipClass {

-webkit-clip-path: polygon(20% 0%, 0% 0%, 0% 50%, 0% 80%, 0% 100%, 50%100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0, 50% 0);

}

.clipClass:hover {

-webkit-clip-path: polygon(50% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%,50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);

}