CSS如何繪制六邊形？在這篇文章中，我們將介紹如何使用CSS繪制一個六邊形，為您解決這個問題。

.hexagon {
position: relative;
display: inline-block;
width: 100px;
height: 57.74px;
background-color: #f00;
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.hexagon:before {
content: "";
position: absolute;
top: -28.87px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 28.87px solid #f00;
}
.hexagon:after {
content: "";
position: absolute;
bottom: -28.87px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 28.87px solid #f00;
}

讓我們來分解這段代碼：

• position: relative; // 設置相對父元素位置
• display: inline-block; // 設置元素為塊級元素，并讓其他元素在其后續行上呈現
• width: 100px; // 設置六邊形的寬度
• height: 57.74px; // 設置六邊形的高度，4/3倍于寬度，使其看起來正好為六邊形
• background-color: #f00; // 設置六邊形顏色，這里使用紅色（#f00）
• -webkit-transform: rotate(120deg); // 旋轉六邊形120度，使其變成六邊形（六個角）
• -ms-transform: rotate(120deg); // 旋轉六邊形120度，使其變成六邊形（六個角）
• transform: rotate(120deg); // 旋轉六邊形120度，使其變成六邊形（六個角）
• :before和:after偽類用于創建六邊形上下兩個三角形。

使用這個CSS，我們可以快速地創建完美的六邊形！