CSS畫正六邊形

.hexagon {
width: 80px;
height: 46.24px;
background-color: #9effa7;
position: relative;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 23.12px solid #9effa7;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 23.12px solid #9effa7;
}

以上代碼可以畫出一個寬為80像素、高為46.24像素的正六邊形。

由于正六邊形是由六個等邊三角形組成的，所以我們需要分別畫出它的上三角形和下三角形。

.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}

這段代碼是用來畫三角形的。我們可以看到，它的左右兩邊的邊界都是固定的40像素，而上下兩邊的邊界則是0，因為我們希望它是三角形。這樣，就生成了一個類似菱形的圖形。

.hexagon:before {
bottom: 100%;
border-bottom: 23.12px solid #9effa7;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 23.12px solid #9effa7;
}

這里的代碼是分別設置了上下兩個三角形的位置和樣式。

其中，:before偽元素的bottom:100%表示將上三角形移動到正六邊形的底部，并且使用border-bottom設置了三角形的顏色和邊界。同理，:after偽元素的top:100%表示將下三角形移動到正六邊形的頂部，并且使用border-top設置了三角形的顏色和邊界。

這樣就可以畫出一個漂亮的正六邊形了。