相信大多数前端同学在面试或者学习的时候都遇到过使用 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 了。当然,未来在支持度改善的情况下,我还是很看好 clip-path 的发展的。

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

CSS
支付宝扫码打赏 微信打赏

坚持原创技术分享,您的支持将鼓励我继续创作!

扫描二维码,分享此文章

逆葵's Picture
逆葵

花名逆葵,刚刚毕业的北邮 CS 土著一枚。现在淘宝 FED 搬砖。《Vue.js 权威指南》作者之一。学习、思考、沉淀中,向成为顶级 JavaScript 技术栈开发者努力。