技術分享帖教你如何利用CSS寫一個六邊形？

衆所周知，通常狀況下div所表現出來的形態是一個矩形，若是給它添加border-radius屬性，可讓它成爲一個圓角矩形或者是圓形，可是若是但願div表現出更多的形態來呢？

那麼咱們就來說講如何用CSS來寫一個六邊形。

你們首先來看一下，一個六邊形，拆解開來的話，就是一個矩形加左右兩個三角形。

 

 

 

 

三角形的話很好寫，用邊框border屬性就能夠實現。

當咱們給一個div很是粗的邊框，可是寬度和高度分別都設置爲0的時候，我就會獲得以下的圖形。

 

 

 

 

 

 

 

 

那麼咱們只要把其中一條邊框給刪除，另外兩條邊框變成透明，這樣就能獲得一個三角形。

 

 

 

 

 

 

 

 

那麼咱們只要把兩個三角形和一個矩形拼起來，這樣就構成了一個六邊形。

有些人要問，這樣作一個結構，我不是要用三個元素才能達到？太過繁瑣了！

但其實不須要，咱們只要結合正確的選擇器，只用一個元素就能夠達到。

首先將六邊形解構成中間矩形，兩邊三角形，而後咱們將中間矩形用div表現出來。

 

假設六邊形的邊都是120px，利用三角函數計算出X的值，雙倍以後就是矩形另外一條邊的長。

 

 

 

 

而後咱們利用:after和:before這兩個選擇器作出兩邊的三角形。計算出Y邊長，就是三角形的邊框長度。

 

 

注意上下邊框使用的寬度。

 

 

 

 

 

 

 

 

而後以box爲做爲定位調整一下三角形的位置。

 

 

 

 

 

 

 

 

另外一邊使用:after作相同處理。

 

 

 

 

 

 

 

 

將中間矩形的顏色修改過來就獲得了一個六邊形。