CSS3在網頁設計中提供了各種強大的功能，其中之一就是能夠通過純CSS代碼來繪制六角形。本文將向您展示如何使用CSS3來實現這一效果。步驟1：添加一個空的div首先，在HTML頁面中添加一個空的div

CSS3在網頁設計中提供了各種強大的功能，其中之一就是能夠通過純CSS代碼來繪制六角形。本文將向您展示如何使用CSS3來實現這一效果。

步驟1：添加一個空的div

首先，在HTML頁面中添加一個空的div元素，作為繪制六角形的容器。

```html

```

步驟2：設置div的樣式

接下來，我們需要通過CSS樣式來定義這個div的寬度和高度，并利用border屬性使其成為一個三角形。

```css

#hexagon {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

```

步驟3：理解六角形的原理

六角形是由兩個方向相反的三角形重疊而成的。所以我們接下來需要在原本的div中新增一個元素after，并為其添加樣式。

步驟4：為after添加樣式

與div一樣，我們還需要為after添加width、height和border屬性，但是在不加定位的情況下，它會變成一個平行四邊形。

```css

#hexagon::after {

content: "";

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

```

步驟5：添加定位屬性

為了讓after元素正確地出現在div容器的上方，我們需要為div和after都設置相對定位。

```css

#hexagon {

position: relative;

}

#hexagon::after {

position: relative;

top: -100px;

left: -50px;

}

```

完成！

通過以上步驟，我們成功地使用純CSS3代碼繪制了一個六角形。您可以根據自己的需要調整div的大小和顏色，實現不同樣式的六角形。記得在HTML頁面中引入對應的CSS文件或將CSS代碼嵌入到style標簽中。