用CSS繪製簡單圖形

這裏有篇文章， https://css-tricks.com/examples/ShapesOfCSS/  ，介紹瞭如何用只用1個元素和CSS規則繪製各類常見的圖形： 從簡單的矩形、三角形到複雜的月亮、放大鏡甚至是太極圖。  
這種繪圖方式主要用到了兩類技巧： 一是使用僞元素， 二是設置圖形的邊框。
特別是邊框的使用，很是巧妙。從這些例子中能夠發現幾點瀏覽器渲染邊框的規律：

1. 當元素的寬、高設置爲0時，瀏覽器仍然會渲染元素的邊框（即使box-sizing設置爲了border-box，這時元素實際的寬/高會是邊框的厚度之和)。
2. 兩條相鄰邊框（例如左邊和上邊）之間的分界線是邊框內側矩形和外側矩形的頂點的鏈接線，也就是說，每條邊框實際都是一個梯形（也可能退化爲三角型/矩形，若是一條/兩條相鄰邊框的寬度爲0）。
3. 若是某個角設置了border-radius, 當兩個相鄰邊框寬度不一致時，這一段圓弧的寬度是漸變的，同時，圓弧也是分屬相鄰兩條邊框的（把兩條邊框設置爲不一樣的顏色就能看出來），兩段圓弧的分界線仍然是內外兩個矩形的頂點的連線。

僅僅是利用上面3條規律，就已經能夠繪製出比較豐富的形狀了，再結合旋轉等CSS規則，繪製的圖形就至關炫酷了。