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

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

這是一個突出的問題，突顯了 CSS3 轉換的功能。該解決方案涉及使用單一 div 元素，以及形成六邊形的左翼和右翼的附加子 div。背景圖像是繼承的，而偽元素旋轉圖像以創建完整六邊形的錯覺。

以下是此技術的細分：

• 使用下列指令定義初始六邊形結構div:
  `
  十六進制1

  v>
  

  十六進位2

  
  ...
  

  `
• 使用內聯塊和設定尺寸；調整邊距以達到所需的間距。
• 主六邊形：
  `.hexrow > div {
  寬度: 100px;
  高度: 173.2px;
  ...}
  `

• 旋轉「翅膀」:
  `.hexrow > ;分區> div:first-of-type {
  -ms-transform:rotate(60deg);
  -webkit-transform:rotate(60deg);
  ...}

  `.hexrow >分區> div:last-of-type {
  -ms-transform:rotate(-60deg);
  -webkit-transform:rotate(-60deg);
  ...`

• 定位偽偽偽元素以建立完整的六邊形：
  `.hexrow >分區> div:first-of-type:before {
  -ms-transform:旋轉(-60deg) 翻譯(-150px, 0);
  -webkit-transform:旋轉(-60deg) 翻譯(-150px, 0) );
  ... }

  `.hexrow >分區> div:last-of-type:before {
  -ms-transform:rotate(60deg) 翻譯(100px, 86.6px);
  -webkit-transform:rotate(60deg) 翻譯(100px, 86.6px);
  ...`

• 將文字加到範圍內六邊形。

此技術透過定位「hexrow」容器中的特定元素，可以在六邊形內精確放置文字或影像。