内容简介：相信大多数前端同学在面试或者学习的时候都遇到过使用 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 的发展的。
本文纯属流水文，无甚深度，各位看官轻喷。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
游戏开发的数学和物理
［ 日］ 加藤洁 / 徐 谦 / 人民邮电出版社 / 59.00元
本书严格选取了游戏开发中最常用的数学和物理学知识，通过游戏开发实例，配上丰富的插图，以从易到难的顺序进行讲解。第1章到第5章分别讲解了物体的运动、卷动、碰撞检测、光线的制作、画面切换的细分处理。这五章将2D游戏必需的知识一网打尽，同时还严格挑选了少量3D游戏编程的基础内容以供参考。第6章系统梳理了游戏开发的数学和物理学理论，帮助读者更好地理解前五章的内容。 本书适合网络和手机游戏开发者阅读。一起来看看 《游戏开发的数学和物理》 这本书的介绍吧!
