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