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

使用CSS3 產生重複的六邊形圖案

在本文中，我們將深入研究Stack Overflow 上提出的一個有趣的問題：建立一個重複的六角形圖案使用CSS 的六角形圖案。雖然圖片就足夠了，但這裡的目標是純粹使用 CSS 來完成這項壯舉。

理解挑戰

使用者設想一個視覺上迷人的六邊形圖案，能夠在它們上面分層文字或圖像。主要挑戰在於無縫連接六邊形，同時保持對每個形狀內元素放置的精確控制。

初始方法：利用

s

一個直接的方法涉及利用六邊形形狀的

。然而，這種方法有其限制：六邊形無法有效連接。使用重複六邊形圖案的其他嘗試會阻礙將內容放置在特定的六邊形形狀中。

突破：偽元素與精確旋轉

為了克服這些限制，我們引入了一種創新的方法依賴於單一

的方法元素與偽元素配對。該技術涉及旋轉背景圖像，實現六邊形之間的無縫連接。

實作細節

1. 六邊形行：

   • 建立一個「行」來包含十六進位grid
   • 定義六邊形之間的適當邊距

2. 六邊形結構：

   • 使用寬度和三角形計算得出的高度
   • 包括創建的邊距“重疊”連續網格
   • 應用所需的背景圖像

3. 奇數和偶數六邊形的高度調整：

   • 相對於奇數六邊形向下移動row
   • 向上移動偶數六邊形，建立交錯效果

4. 六邊形「翅膀」：

   • 利用兩個子元素
     ; “翅膀”的元素
   • 旋轉並定位這些元素以創建六邊形的獨特形狀

   • 背景圖像旋轉的偽元素：

     • 將背景圖片應用到「翅膀」和偽元素
     • 旋轉偽元素以「不旋轉」背景圖像，有效創建水平翅膀

   • 文字放置：

     • 新增一個每個六邊形內的元素用於容納文字
     • 調整邊距和行高以進行垂直對齊和文字換行

   • 其他自訂：

     • 單獨設定特定行或六邊形的樣式，修改圖像、文字設定和不透明度

   範例實作

   範例實作
   範例實作
   範例實作提供的小提琴示範了這種創新技術的實施。嘗試使用程式碼來修改外觀並根據您的喜好自訂圖案。 進一步增強可以透過添加額外的內容來擴展此技術以創建令人驚嘆的複雜圖案
   元素或採用3D 變換來實現深度和交互性。