用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
其簡寫形式：
.clipClass {
-webkit-clip-path: inset(25%0 round 025%);
}
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%);
}