在網頁設計中，我們經常需要使用各種效果來增加頁面的立體感和層次感。其中，用 CSS 實現立體六邊形效果是一種常見的技巧。

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

以上代碼是一個簡單的 CSS 樣式，實現了一個黑色的立體六邊形。具體來說，在主類.hexagon中，設置了寬度和高度，并且使用了position: relative來讓盒子相對位置定位。接下來，使用:before與:after偽元素分別實現了上下兩個三角形，形成了一個六邊形的外框。

其中，設置的border邊框屬性可以讓三角形形成一個等邊三角形，并且使用了transparent來讓一側邊框變成透明，形成銳角部分。而黑色的正方形則是通過調整:before與:after偽元素之間的距離來實現的。

這樣，我們就可以輕松地使用 CSS 實現一個立體六邊形的效果，為網頁設計帶來更多的立體感與層次感。當然，具體實現還需要綜合考慮多種因素，如瀏覽器兼容性、響應式布局等等，但這只是一種基礎的方法。