在網頁設計中，一些特殊的圖形會給頁面增添不少美感和趣味。其中六邊形圖形是相當常見的，下面就來介紹如何用CSS制作一個直六邊形。

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

首先，我們要設置一個div的樣式，并將它的高度和寬度分別設定為173.21像素和100像素，這是為了確保這個六邊形的寬高比為1:1.7321。

接下來，我們分別在這個div的前面和后面加上:before和:after元素，因為在CSS中只有加上兩個元素才能使六邊形變成直六邊形。在這里，我們使用了偽元素，選擇器是“::before”和“::after”，這樣我們就可以通過內容屬性將這些元素添加到HTML中。

其中，width屬性用于保證三角形左右邊沿對稱，同時使用transparent屬性使得三角形前后相連。然后使用border屬性給三角形賦予顏色和形狀，同時，位置屬性把三角形分別放在六邊形上方和下方。

通過這種方法，我們便可以用CSS制作一個直六邊形了。盡管過程有些繁瑣，但是這個基本的CSS圖形是值得我們學習和掌握的。