Clip-Path, Polygon 图形构建

clip-path 的前身是 SVG, 支持二维坐标

polygon 的作用是根据二维点坐标, 依次连线, 最后闭合形成遮罩区域

clip-path:polygon 生成三角形的过程非常简单

.path{
  clip-path: polygon(5px, 10px, 16px, 3px, 16px, 17px);
}

polygon 对点的数目没有限制, 所以可以生成各种几何图案

clip-path 还可以用 transition 过渡或者 animation 动画, 很好的弥补了 CSS3 的 transform 变换的不足

polygon 动画有一个重要前提, 那就是坐标的数目在变化前后必须一样. 这样就浏览器就能实现连续动画.