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