曾经和某位朋友在聊天中讨论过这样一个话题:综合90%的网站的布局以及页面中的元素不是方的,就是圆的。就像所有的颜色都是由三原色(RGB
)构成的一样,所有规则的形状似乎也都是由方和圆组成的;抛开设计效果的好看与否不说,似乎不规则的设计在实现(CSS)成本上也是一个麻烦,毕竟在CSS3
之前,我们实现一个圆都要切图,更何况那些复杂的多边形。好在CSS3
时代的到来,尤其是CSS3
在借鉴并增加了众多SVG
属性的今天,使用纯CSS
绘制一个多边形已经不再是什么难事。文章中要介绍的clip-path
这个属性也是一个借鉴了SVG
的clipPath
的借鉴品(确切的说应该是css clip
属性(已被废弃)的替代品,svg clip-path
属性的延伸品🙈)。