图片来自 CHRIS COYIER
在前端开发中，你或多或少都会接触到css图形。之前我整理过 伪元素&伪类 的内容，为的就是更加熟悉了解它们，以便更好的使用它们。同时也也使用它一做了一些动画。 css3-animate。
这里说的用css做图形，其实是使用一个html元素，结合它的伪元素 ::before & ::after （不需要其他额外的非伪元素的html元素），然后定义样式来生成所需的图形。
这里不是说不可以使用其它的html元素，只是这样的好处是在html方便引入，而不需要每次引入都需要添加大量的html片段（夸张说法）。
主要方法
可以使用的样式属性如下：
* border * border-radius * transform * box-shadow
为了兼容性，使用pseudo-elements(::before, ::after) 和上面样式属性中的一种或几种随机组合。
当然，在前端我们经常使用的时svg和font-icon。
还用一种是css3的shape-outside实现文本环绕的效果。
这种单元素的css图形还是比较实用的。
图形分类
几何图形。如：三角形，正方形，矩形，平行四边形，五边形，六边形等
星形
卡通图形。如：吃豆人等
图标。 如：心形，箭头，锁，放大镜等。
作者：缘自世界
链接：https://www.jianshu.com/p/1406b44c981b
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/1775/viewspace-2815685/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
集合的工具类
请登录后发表评论
登录
全部评论
