内容简介：相信大多数前端同学在面试或者学习的时候都遇到过使用 CSS 绘制正方形、三角形等基础图形的问题，各种奇技淫巧想必大家都运用得比较熟练。本文则介绍了使用 CSS3 中提出的 clip-path 来解决该问题的方法。clip-path，顾名思义，可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的 URL 定义的路径或者外部 svg 的路径，或者作为一个形状例如其语法和使用案例可移步
相信大多数前端同学在面试或者学习的时候都遇到过使用 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 的发展的。
本文纯属流水文，无甚深度，各位看官轻喷。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Operating System Algorithms
Nathan Adams、Elisha Chirchir / CreateSpace Independent Publishing Platform / 2017-4-21 / USD 39.15
Operating System Algorithms will walk you through in depth examples of algorithms that you would find in an operating system. Selected algorithms include process and disk scheduling.一起来看看 《Operating System Algorithms》 这本书的介绍吧!
