巧用 CSS3 中的 clip-path 绘制图形

相信大多数前端同学在面试或者学习的时候都遇到过使用 CSS 绘制正方形、三角形等基础图形的问题，各种奇技淫巧想必大家都运用得比较熟练。本文则介绍了使用 CSS3 中提出的 clip-path 来解决该问题的方法。

clip-path，顾名思义，可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的 URL 定义的路径或者外部 svg 的路径，或者作为一个形状例如circle().。

其语法和使用案例可移步 MDN 查看，这一来源于 SVG 的属性相当强大，用其完成三角形之类基础图形的绘制十分简单。下面是绘制一个等边三角形的核心代码，只需一行：

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

如果你对 clip-path 令人眼花缭乱的语法还有一定的抵触，这个网站 CSS clip-path maker 则将其使用成本降到了最低。你只要傻瓜式地选择好各项配置，它就能帮你生成 clip-path 的代码。可以看到，clip-path 能够完成相当复杂的图形绘制。

唯一能制约 clip-path 放飞自我的可能就是兼容度了，截至本文写作时，浏览器对 clip-path 的支持程度如下：

看来只有在现代浏览器上才能谨慎使用 clip-path 了。当然，未来在支持度改善的情况下，我还是很看好 clip-path 的发展的。

本文纯属流水文，无甚深度，各位看官轻喷。