使用CSS3 產生重複六邊形圖案
六邊形是設計中常用的形狀，可以為網頁添加獨特且具有視覺吸引力的元素頁。雖然可以使用圖像創建六邊形，但也可以使用 CSS3 創建重複的六邊形圖案。
建立基本六邊形
第一步是使用 CSS 建立基本的六邊形形狀。這可以透過邊框和偽元素的組合來完成。以下CSS程式碼將建立一個黑色邊框和白色背景的六邊形：
.hexagon {
width: 100px;
height: 86.6px;
border: 1px solid black;
background-color: white;
position: relative;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
border: 1px solid black;
background-color: white;
width: 50px;
height: 50px;
}
.hexagon:before {
left: -50px;
top: 0;
transform: rotate(60deg);
}
.hexagon:after {
right: -50px;
bottom: 0;
transform: rotate(-60deg);
}重複圖案
建立基本六邊形後，圖案可以使用第n 個子選擇器重複。以下CSS程式碼將在水平行中重複六邊形圖案：
.hexagon-row {
display: flex;
flex-direction: row;
}
.hexagon-row .hexagon {
margin: 0 10px;
}自訂圖案
可以自訂六邊形圖案以滿足您的特定需求。例如，您可以變更六邊形的大小、邊框的顏色或背景顏色。您也可以為六邊形新增圖像或文字。
結論
使用 CSS3，可以輕鬆建立重複的六角形圖案。此模式可用於為網頁添加獨特且具有視覺吸引力的元素。嘗試不同的自訂選項來建立適合您需求的模式。
以上是如何僅使用 CSS3 建立重複的六角形圖案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
