如何僅使用 CSS3 建立重複的六角形圖案？

使用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中文網其他相關文章！