如何仅使用 CSS3 创建重复的六边形图案？

使用 CSS3 生成重复的六边形图案

这是一个突出的问题，突出了 CSS3 转换的功能。该解决方案涉及使用单个 div 元素，以及形成六边形的左翼和右翼的附加子 div。背景图像是继承的，而伪元素旋转图像以创建完整六边形的错觉。

以下是该技术的细分：

• 使用以下命令定义初始六边形结构div:
  `
  十六进制1

  
  

  十六进制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”容器中的特定元素，可以在六边形内精确放置文本或图像。