眾所周知，一般情況下div所表現出來的形態是乙個矩形，如果給它新增border-radius屬性，可以讓它成為乙個圓角矩形或者是圓形，但是如果希望div表現出更多的形態來呢？
那麼我們就來講講如何用css來寫乙個六邊形。
大家首先來看一下，乙個六邊形，拆解開來的話，就是乙個矩形加左右兩個三角形。
三角形的話很好寫，用邊框border屬性就可以實現。
當我們給乙個div非常粗的邊框，但是寬度和高度分別都設定為0的時候，我就會得到如下的圖形。
那麼我們只要把其中一條邊框給刪除，另外兩條邊框變成透明，這樣就能得到乙個三角形。
那麼我們只要把兩個三角形和乙個矩形拼起來，這樣就構成了乙個六邊形。
有些人要問，這樣做乙個結構，我不是要用三個元素才能達到？太過繁瑣了！
但其實不需要，我們只要結合正確的選擇器，只用乙個元素就可以達到。
首先將六邊形解構成中間矩形，兩邊三角形，然後我們將中間矩形用div表現出來。
假設六邊形的邊都是120px，利用三角函式計算出x的值，雙倍之後就是矩形另一條邊的長。
然後我們利用:after和:before這兩個選擇器做出兩邊的三角形。計算出y邊長，就是三角形的邊框長度。
注意上下邊框使用的寬度。
然後以box為作為定位調整一下三角形的位置。
另一邊使用:after做相同處理。
將中間矩形的顏色修改過來就得到了乙個六邊形。
css畫正六邊形
說下兩種css 製作正六邊形的方法。先看一下結果 在之前要先了解一下正六邊形內角和邊的關係，正六邊形的每個內角是60deg，如圖 3其實是根號3 方法一 原理把正六邊形分成三部分，左中右分別是 before部分，div部分，after部分，如圖 before三角形部分是div的before偽元素，a...
模擬題選寫 六邊形
棋盤是由許多個六邊形構成的，共有5種不同的六邊形編號為1到5，棋盤的生成規 則如下 1.從中心的乙個六邊形開始，逆時針向外生成乙個個六邊形。2.對於剛生成的乙個六邊形，我們要確定它的種類，它的種類必須滿足與已生成的相 鄰的六邊形不同。3.如果有多個種類可以選，我們選擇出現次數最少的種類。4.情況3下...
利用 CSS3 實現乙個轉動立體六邊形 《一》
一 實現乙個立體六邊形 結果示例圖 示例 test container carousel carousel div rotate 0 rotate 1 rotate 2 rotate 3 rotate 4 rotate 5 注意 利用 css3 新特性實現的 3d 元素 在ie上 相容性並不是很好，...