css2之前徐块，BOX呈現(xiàn)的都是四邊形的，css3后出現(xiàn)了圓角(redius)灾而，無規(guī)則形狀(clip-path)
最近有一個需求就是把矩形的圖裁剪成五角星胡控，百度了一波，看到了clip-path這個屬性旁趟。
他的值有好幾個inset(), circle(), ellipse(), polygon()
附上NDM鏈接clip-path
可以看出支持url里面支持svg等等昼激，非常強大，今天我們只講多邊形剪切(polygon)
我們來看看代碼實現(xiàn)一個五角星要怎么實現(xiàn)：
polygon(
47% 1%,
59% 23%,
92% 29%,
68% 47%,
79% 82%,
46% 54%,
16% 79%,
29% 43%,
7% 31%,
38% 25%
);
每一個參數(shù)都是一個路徑锡搜，跟canvas的是一樣的橙困，前面是開始，后面是結(jié)束耕餐。
打開瀏覽器一看凡傅，我擦，果然變了（如果沒效果可能是瀏覽器版本太低了）
不過肠缔，寫的時候很容易放錯像捶，而且修改也很麻煩，也很長....
我弄了一個可視化編輯器桩砰，可以試試
live
可視化編輯預(yù)覽圖
由于clip-path支持css過渡，那也意味可以實現(xiàn)動畫制作释簿。
有時間我寫一個可視化動畫編輯器亚隅。
tips: 由于瀏覽器兼容問題，只限于移動端使用--2017
ok庶溶，就這樣吧煮纵。
---END-
