眾所周知，一般情況下div所表現出來的形態是一個矩形，如果給它添加border-radius屬性，可以讓它成為一個圓角矩形或者是圓形，但是如果希望div表現出更多的形態來呢？
那麼我們就來講講如何用CSS來寫一個六邊形。
大家首先來看一下，一個六邊形，拆解開來的話，就是一個矩形加左右兩個三角形。
三角形的話很好寫，用邊框border屬性就可以實現。
當我們給一個div非常粗的邊框，但是寬度和高度分別都設置為0的時候，我就會得到如下的圖形。
那麼我們只要把其中一條邊框給刪除，另外兩條邊框變成透明，這樣就能得到一個三角形。
那麼我們只要把兩個三角形和一個矩形拼起來，這樣就構成了一個六邊形。
有些人要問，這樣做一個結構，我不是要用三個元素才能達到？太過繁瑣了！
但其實不需要，我們只要結合正確的選擇器，只用一個元素就可以達到。
首先將六邊形解構成中間矩形，兩邊三角形，然後我們將中間矩形用div表現出來。
假設六邊形的邊都是120px，利用三角函數計算出X的值，雙倍之後就是矩形另一條邊的長。
然後我們利用:after和:before這兩個選擇器做出兩邊的三角形。計算出Y邊長，就是三角形的邊框長度。
注意上下邊框使用的寬度。
然後以box為作為定位調整一下三角形的位置。
另一邊使用:after做相同處理。
將中間矩形的顏色修改過來就得到了一個六邊形。
分享到:
閱讀更多 千鋒H5 的文章
