CSS六邊形

一、CSS六邊形介紹

CSS六邊形，指的是利用CSS繪製的六邊形圖形。六邊形是一種常見的圖形，它在Web開發中應用廣泛。CSS六邊形的優點在於可以響應式布局，不需要使用圖片，對於網站性能優化有很大幫助。

二、CSS六邊形代碼

下面是CSS繪製六邊形的代碼示例：

.hexagon {
   width: 100px;
   height: 55px;
   position: relative;
   overflow: hidden;
}

.hexagon:before, .hexagon:after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   background: inherit;
   transform: rotate(60deg);
}

.hexagon:before {
   transform: rotate(-60deg);
}

.hexagon:after {
   transform: rotate(120deg);
}

這段代碼使用了:before和:after偽元素來繪製六邊形。通過transform:rotate()來控制偽元素的旋轉角度，從而得到六邊形的形狀。其中，必須設置寬高一致，並通過overflow:hidden將多餘部分裁剪掉。

三、CSS六邊形導航選項卡

利用CSS六邊形可以實現獨特的導航選項卡。下面是一段示例代碼：

.navigation {
   display: flex;
   justify-content: center;
   align-items: center;
}

.navigation-item {
   margin: 0 20px;
   position: relative;
   cursor: pointer;
}

.navigation-item:before {
   content: "";
   position: absolute;
   bottom: -10px;
   left: 0;
   width: 100%;
   height: 100%;
   background: inherit;
   transform-origin: bottom center;
   transform: skewX(-30deg) rotate(-60deg);
   transition: transform 0.3s ease-in-out;
}

.navigation-item:hover:before {
   transform: skewX(-30deg) rotate(0deg);
}

這段代碼使用了偽元素:before來實現獨特的導航選項卡樣式。通過設置transform:skewX()和transform:rotate()屬性來讓偽元素變形成六邊形。當滑鼠懸浮於選項卡上時，通過:hover選擇器來改變偽元素的transform屬性，實現動態效果。

四、CSS六邊形邊框

通過利用CSS六邊形繪製邊框，可以在Web開發中實現精美的效果。下面是一段示例代碼：

.border {
   width: 200px;
   height: 200px;
   position: relative;
}

.border:before, .border:after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   border: 2px solid #333;
   transform: rotate(60deg);
}

.border:before {
   transform: rotate(-60deg);
}

.border:after {
   transform: rotate(120deg);
}

這段代碼使用了偽元素:before和:after來繪製六邊形形狀的邊框。利用border屬性可設置邊框樣式。需要注意的是，這裡的六邊形寬高一致，並且邊框要減去寬度，不然會出現溢出問題。

五、CSS六邊形圖片

利用CSS六邊形可以繪製出特殊形狀的圖片展示。下面是一段示例代碼：

.image {
   width: 200px;
   height: 200px;
   position: relative;
   overflow: hidden;
}

.image img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
}

.image:before, .image:after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   background-image: url("image.jpg");
   transform: rotate(60deg);
}

.image:before {
   transform: rotate(-60deg);
}

.image:after {
   transform: rotate(120deg);
}

這段代碼利用偽元素:before和:after來繪製六邊形形狀的背景，而圖片則通過普通元素來絕對定位居中。需要注意的是，這裡的六邊形寬高一致，並且圖片需要使用z-index屬性調整層級，以免被覆蓋。

六、CSS六邊形拼接布局

利用CSS六邊形，可以實現多個六邊形拼接成布局的效果。下面是一段示例代碼：

.layout {
   width: 100%;
   height: 600px;
   position: relative;
   margin-top: 50px;
}

.layout-item {
   position: absolute;
   width: 200px;
   height: 200px;
}

.layout-item:nth-child(even) {
   top: 150px;
}

.layout-item:nth-child(odd) {
   top: 300px;
}

.layout-item:nth-child(1), .layout-item:nth-child(2), .layout-item:nth-child(3) {
   left: 50%;
   transform: translateX(-350px);
}

.layout-item:nth-child(4), .layout-item:nth-child(5), .layout-item:nth-child(6) {
   left: 50%;
   transform: translateX(150px);
}

.layout-item:before, .layout-item:after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   background: #f1f1f1;
   transform: rotate(60deg);
}

.layout-item:before {
   transform: rotate(-60deg);
}

.layout-item:after {
   transform: rotate(120deg);
}

這段代碼利用偽元素:before和:after來繪製六邊形形狀的背景，而布局則通過普通元素來絕對定位控制位置。通過:nth-child選擇器指明每個六邊形的位置和偏移量。此外，為了控制背景顏色，需要將偽元素設置為z-index:-1。

七、CSS六邊形DIV怎麼畫

在HTML中，使用div元素可以輕鬆繪製CSS六邊形。下面是一段示例代碼：

我是六邊形
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/151656.html