用CSS绘制简单图形
这里有篇文章， https://css-tricks.com/examples/ShapesOfCSS/ ，介绍了如何用只用1个元素和CSS规则绘制各种常见的图形： 从简单的矩形、三角形到复杂的月亮、放大镜甚至是太极图。
这种绘图方式主要用到了两类技巧： 一是使用伪元素， 二是设置图形的边框。
特别是边框的使用，非常巧妙。从这些例子中可以发现几点浏览器渲染边框的规律：
1. 当元素的宽、高设置为0时，浏览器仍然会渲染元素的边框（即便box-sizing设置为了border-box，这时元素实际的宽/高会是边框的厚度之和)。
2. 两条相邻边框（例如左边和上边）之间的分界线是边框内侧矩形和外侧矩形的顶点的连接线，也就是说，每条边框实际都是一个梯形（也可能退化为三角型/矩形，如果一条/两条相邻边框的宽度为0）。
3. 如果某个角设置了border-radius, 当两个相邻边框宽度不一致时，这一段圆弧的宽度是渐变的，同时，圆弧也是分属相邻两条边框的（把两条边框设置为不同的颜色就能看出来），两段圆弧的分界线仍然是内外两个矩形的顶点的连线。
仅仅是利用上面3条规律，就已经可以绘制出比较丰富的形状了，再结合旋转等CSS规则，绘制的图形就相当炫酷了。
