CSS六邊形是Web設(shè)計(jì)中常見的一種圖形形狀，看起來特別獨(dú)特。本文將詳細(xì)介紹如何使用CSS代碼創(chuàng)建六邊形形狀。

.hexagon {
width: 100px;
height: 55px;
background: #6C6;
position: relative;
}
.hexagon:before,
.hexagon:after {
content: "";
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
position: absolute;
left: 0;
}
.hexagon:before {
bottom: 100%;
border-bottom: 27.5px solid #6C6;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 27.5px solid #6C6;
}

上面的CSS代碼會(huì)生成一個(gè)六邊形形狀的容器。它的寬度為100px，高度為55px，背景顏色是綠色。在六邊形的下面和上面使用的是:before與:after偽元素。

這兩個(gè)偽元素都是絕對(duì)定位，并使用CSS的:border屬性生成了六邊形的三角形。通過設(shè)置它們的方向和顏色，三角形開始組合成六邊形。如果需要為CSS六邊形添加其他特性，只需要在原有的代碼中進(jìn)行改動(dòng)即可。