CSS可以用來制作多種形狀的圖案，其中六邊形是比較常見的一種。在這篇文章中，我們將學習如何使用CSS來創建一個具有邊框效果的六邊形。

.hexagon {
width: 100px;
height: 60px;
background-color: #2980b9;
position: relative;
}
.hexagon:before, .hexagon:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
border-bottom: 30px solid #2980b9;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hexagon:before {
border-bottom-color: #fff;
z-index: -1;
}
.hexagon:after {
transform: rotate(180deg);
border-bottom-color: #fff;
}
.hexagon p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 20px;
font-weight: bold;
}
.hexagon:hover:before, .hexagon:hover:after {
border-bottom-color: #FFD700;
}
.hexagon:hover {
background-color: #FFD700;
}
.hexagon:hover p {
color: #1a1a1a;
}

首先定義一個帶有寬度和高度的六邊形，可以通過設置border-radius為0來禁用CSS默認的圓角。然后我們可以使用:before 和 :after偽元素來制作六邊形的邊框效果，同時給它們賦予寬度為0、透明背景色和透明的左右三角形，最后設置border-bottom的樣式來控制它們的高度。接著，通過給其中一個偽元素設置白色的border-bottom-color和z-index來制作出邊框的效果，在另一個偽元素中使用rotate（180deg）將它上下翻轉。使用p標簽來添加文本內容，并設置樣式。最后使用:hover偽類來制作鼠標滑過時的效果。