这里有篇文章， https://css-tricks.com/examples/ShapesOfCSS/  ，介绍了如何用只用1个元素和CSS规则绘制各种常见的图形： 从简单的矩形、三角形到复杂的月亮、放大镜甚至是太极图。  
这种绘图方式主要用到了两类技巧： 一是使用伪元素， 二是设置图形的边框。
特别是边框的使用，非常巧妙。从这些例子中可以发现：当元素的宽、高设置为0时，浏览器仍然会渲染元素的边框（即便box-sizing设置为了border-box，这时实际的宽/高会是边框的厚度之和）,巧妙设置4条边框的宽度，就可以做出很多奇妙的效果。

用CSS绘制简单图形