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

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

我們來看看代碼實(shí)現(xiàn)一個(gè)五角星要怎么實(shí)現(xiàn)：

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

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

我弄了一個(gè)可視化編輯器，可以試試

live

可視化編輯預(yù)覽圖

由于clip-path支持css過渡，那也意味可以實(shí)現(xiàn)動(dòng)畫制作。

有時(shí)間我寫一個(gè)可視化動(dòng)畫編輯器。

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

ok，就這樣吧。

---END-