CSS3中的clip-path可以遮罩很多圖形，它的原理其實是將超出剪裁范圍的內容overflow設置為hide了，該屬性可以剪裁多種不同的圖形效果，算是比較方便實用的工具，但目前看來該屬性瀏覽器兼容性不佳，ie和firefox并不兼容，chrome可以支持，我在chrome嘗試了幾個簡單的例子。

1.圓形circle

1.png

//html
<div class='container'>
  <div class='content clip-sty'></div>
</div>
//css
.clip-sty{
  -webkit-clip-path: circle(95px at 100px 100px);
}

原理很簡單，其實就是一個div，添加一個clip-path: circle(95px at 100px 100px)的屬性,第一個參數代表指定圓的半徑，最后兩個參數代表圓心的坐標位置，容器的左上角為坐標原點（0,0），這些數值也可以用百分比表示，如：clip-path: circle(45% at 50% 50%)，超出剪裁外的部分會被隱藏。雖然說圓形的話我們有另一個更快捷的屬性：border-radius就能輕松辦到,但這也不失為一種很有用的工具。

2.橢圓ellipse

2.png

.clip-sty{
  -webkit-clip-path: ellipse(80px 60px at 100px 100px);
}

與圓形十分類似，（100px,100px）表示圓心位置，80px表示較長半徑，60px表示短半徑，也可用百分比形式表示。

3.圓角效果inset
用這個屬性可以創造出一些圓角效果，例如圓角矩形啊等，如圖：

3.png

.clip-sty{
  -webkit-clip-path:inset(20% 0 20% 0 round 0 0 25% 25%);
}

inset使用四個值分別對應“上 右 下 左”的順序，前4個值對應的是外邊距，后4個值對應四個角的圓半徑值。

4.多邊形polygon
寫法：clip-path: polygon(x y, x y, x y … );可以定義多組x,y，每個 (x,y)代表剪裁的坐標，以左上角為初始坐標，如圖：

4.png

.clip-sty{
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

[demo展示中心]：https://yomonah.github.io/project/app.html#/clip-path
[源碼]：https://github.com/yomonah/react-demo/tree/master/src/components/clip