若要使用css畫正六邊形,需要使用transform和rotate屬性。下面的代碼可以畫出一個邊長為40px的正六邊形。
.hexagon{ width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 35px solid blue; transform: rotate(60deg); }
首先,我們需要將一個長方形旋轉60度來得到正六邊形的形狀。這個旋轉可以通過 transform: rotate(60deg); 來實現。接下來,我們通過設置邊框的寬度和顏色來繪制六邊形的邊界。要畫出一個正六邊形,我們需要設置一個基本邊長,然后通過尖端向上的三角形形狀從上面繪制另外三個邊。下面的代碼演示了如何畫出一個邊長為40px的正六邊形,其中邊緣以藍色表示。
<div class="hexagon"></div>
如果您想繪制不同大小的正六邊形,則可以通過調整這些值輕松地更改形狀。祝您成功地使用css繪制正六邊形!