在CSS中，我們經常會使用各種形狀的HTML元素來實現我們的設計需求。六邊形是一種獨特的形狀，它可以用來創建一些有趣的設計特效。在本文中，我們將了解如何使用CSS來制作圓角六邊形。

.hexagon {
width: 100px;
height: 55px;
position: relative;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
top: 0;
left: 0;
border-style: solid;
}
.hexagon:before {
width: 100%;
height: 50%;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #fff transparent;
border-radius: 10px 10px 0 0;
}
.hexagon:after {
width: 100%;
height: 50%;
top: 50%;
border-width: 10px 10px 0 10px;
border-color: #fff transparent transparent transparent;
border-radius: 0 0 10px 10px;
}

代碼中我們使用:before和:after偽元素來創建一個六邊形。使用“border-color”屬性來設置邊框顏色，使用“border-width”屬性來設置邊框寬度 ，使用“border-radius”來實現圓角效果。

最后，讓我們應用這些樣式到HTML元素中:

現在，我們已經成功創建了一個漂亮的圓角六邊形，它可以應用到很多不同的場景中。我們可以使用一些CSS動畫來為它添加更多的效果。