图片来自 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图形还是比较实用的。

图形分类

1. 几何图形。如：三角形，正方形，矩形，平行四边形，五边形，六边形等
2. 星形
3. 卡通图形。如：吃豆人等
4. 图标。 如：心形，箭头，锁，放大镜等。

具体的图形列表和代码可参考github