css2之前，BOX呈現的都是四邊形的，css3后出現了圓角(redius)，無規則形狀(clip-path)

最近有一個需求就是把矩形的圖裁剪成五角星，百度了一波，看到了clip-path這個屬性。
他的值有好幾個inset(), circle(), ellipse(), polygon()
附上NDM鏈接clip-path
可以看出支持url里面支持svg等等，非常強大，今天我們只講多邊形剪切(polygon)

我們來看看代碼實現一個五角星要怎么實現：

polygon(
  47% 1%, 
  59% 23%,
  92% 29%, 
  68% 47%, 
  79% 82%, 
  46% 54%, 
  16% 79%, 
  29% 43%, 
  7% 31%, 
  38% 25%
);

每一個參數都是一個路徑，跟canvas的是一樣的，前面是開始，后面是結束。
打開瀏覽器一看，我擦，果然變了（如果沒效果可能是瀏覽器版本太低了）
不過，寫的時候很容易放錯，而且修改也很麻煩，也很長....

我弄了一個可視化編輯器，可以試試

live

可視化編輯預覽圖

由于clip-path支持css過渡，那也意味可以實現動畫制作。

有時間我寫一個可視化動畫編輯器。

tips: 由于瀏覽器兼容問題，只限于移動端使用--2017

ok，就這樣吧。

---END-