css--元素多边形剪切

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-