CSS自適應六邊形是在網頁設計中經常用到的一種圖形，它主要是利用CSS3來實現的。本文將介紹如何利用CSS3來實現自適應的六邊形。

.hexagon {
width: 100px;
height: 55px;
position: relative;
margin: 25px auto;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 28px solid #6CA6CD;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 28px solid #6CA6CD;
}
@media (max-width: 768px) {
.hexagon {
width: 50px;
height: 27.5px;
margin: 12.5px auto;
}
.hexagon:before,
.hexagon:after {
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 13.5px solid #6CA6CD;
border-top: 13.5px solid #6CA6CD;
}
.hexagon:before {
bottom: 50%;
}
.hexagon:after {
top: 50%;
}
}

上面的代碼是實現六邊形的主要代碼部分，其中我們定義了一個class為hexagon的div元素，然后在其中定義了before和after的偽元素，并通過border的樣式來將一個矩形變成一個六邊形。

其中的max-width用于實現自適應六邊形，當屏幕寬度小于768px時，將六邊形的寬度和高度減半，同時改變before和after的樣式，從而實現適應不同尺寸的屏幕而顯示不同大小的六邊形。

總之，CSS自適應六邊形是一種非常實用的網頁設計技巧，可以有效地提升網頁的視覺效果和用戶體驗。