2. 使用CSS創(chuàng)建正方形:

在CSS中，為容器添加樣式來創(chuàng)建六個相等邊長的正方形。使用position:absolute將它們定位到合適的位置。調整寬度、高度和背景顏色以滿足你的需求。

.hexagon-container {

position: relative;

width: 100%;

}

.hexagon {

position: absolute;

width: 50px;

height: 50px;

background-color: #ff0000;

}

3. 調整正方形的位置:

使用top和left屬性來調整每個正方形的位置，形成六邊形的效果。這里我們使用簡單的百分比值來使其自適應屏幕大小。

.hexagon-1 {

top: 20%;

left: 25%;

}

.hexagon-2 {

top: 20%;

left: 75%;

}

.hexagon-3 {

top: 50%;

left: 0;

}

.hexagon-4 {

top: 50%;

left: 50%;

}

.hexagon-5 {

top: 50%;

left: 100%;

}

.hexagon-6 {

top: 80%;

left: 25%;

}

4. 創(chuàng)建遮罩效果:

使用CSS的::before和::after偽元素來創(chuàng)建遮罩效果。為偽元素設置邊框樣式，將其旋轉45度，并調整位置和尺寸以覆蓋正方形的邊緣部分。

.hexagon::before,

.hexagon::after {

content: "";

position: absolute;

width: 100%;

height: 100%;

border: 5px solid #fff;

transform: rotate(45deg);

}

.hexagon::before {

top: -5px;

}

.hexagon::after {

bottom: -5px;

}

通過以上步驟，我們可以使用HTML和CSS來制作滿屏六邊形遮罩效果。通過調整容器和正方形的樣式，可以實現(xiàn)不同尺寸和顏色的六邊形。這種效果可以應用于網頁背景、圖像展示等多個方面，為頁面增添獨特的視覺效果。

希望本文能幫助讀者學會如何使用HTML和CSS制作滿屏六邊形遮罩，為網頁設計增添一些創(chuàng)意和美感。享受你的創(chuàng)造過程吧！