CSS繪制六邊形，是在網(wǎng)頁設(shè)計(jì)中常常使用的效果，給網(wǎng)頁帶來了更多的美觀性和趣味性。那么，我們該如何使用CSS繪制六邊形呢？下面為大家介紹一下。

.hexagon {
width: 100px;
height: 57.74px;
background-color: #666;
position: relative;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 28.87px solid #666;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 28.87px solid #666;
}

首先，我們需要?jiǎng)?chuàng)建一個(gè)class為'hexagon'的div元素，用來存放我們繪制的六邊形。在這個(gè)div中，我們需要設(shè)置寬度和高度，以及背景顏色。在 'position' 屬性設(shè)置為'relative' 以后，我們就可以使用偽元素:before和:after來繪制六邊形的兩個(gè)三角形了。

使用偽元素:before繪制的三角形，在位置上要放置于六邊形的底部。為了實(shí)現(xiàn)這個(gè)效果，我們可以設(shè)置：bottom: 100%;。三角形的下邊也需要設(shè)置一個(gè)顏色，以實(shí)現(xiàn)六邊形的效果。

同樣的，使用偽元素:after繪制的三角形，要放置于六邊形的頂部。設(shè)置:top: 100%;可以使得三角形相對(duì)于'hexagon'元素底部距離為0。另外，還需要設(shè)置上邊的顏色和寬度為0，來實(shí)現(xiàn)六邊形的效果。

綜上所述，以上代碼可以快速簡單地繪制出一個(gè)六邊形，在網(wǎng)頁設(shè)計(jì)中大有用處。