CSS3提供了強大的布局功能，其中六邊形布局是常用的一種。六邊形布局可以用于展示圖片，使圖片更加有趣和美觀。

.hexagon {
width: 200px;
height: 115px;
position: relative;
background: url('') no-repeat center center;
background-size: cover;
text-align: center;
overflow: hidden;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background: inherit;
transform: rotate(60deg);
}
.hexagon:before {
transform: rotate(-60deg);
}
.hexagon img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}

首先，創建一個六邊形的容器。為其設置合適的寬高，并且使用background屬性給其設置背景圖片。

接著，使用:before和:after偽元素，分別再創建兩個六邊形圖形，遮蓋住原圖形的兩個邊。這樣，就形成了一個六邊形圖形。

最后，在六邊形容器內部加入一個圖片元素，使用絕對定位和居中技巧，將圖片放置在六邊形中央位置。

使用這種布局技巧，可以快速創建美觀的六邊形圖片布局，讓網頁的視覺效果更加豐富和有趣。