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

实现细节

1. 六边形行：

   • 建立一个“行”来包含十六进制grid
   • 定义六边形之间的适当边距

2. 六边形结构：

   • 使用宽度和由三角计算得出的高度
   • 包括创建的边距“重叠”连续网格
   • 应用所需的背景图像

3. 奇数和偶数六边形的高度调整：

   • 相对于奇数六边形向下移动row
   • 向上移动偶数六边形，创建交错效果

4. 六边形“翅膀”：

   • 利用两个子元素
     ; “翅膀”的元素
   • 旋转并定位这些元素以创建六边形的独特形状

   • 背景图像旋转的伪元素：

     • 将背景图片应用到“翅膀”和伪元素
     • 旋转伪元素以“不旋转”背景图像，有效创建水平翅膀

   • 文本放置：

     • 添加一个每个六边形内的元素用于容纳文本
     • 调整边距和行高以进行垂直对齐和文本换行

   • 其他自定义：

     • 单独设置特定行或六边形的样式，修改图像、文本设置和不透明度

   示例实现

   提供的小提琴演示了这种创新技术的实施。尝试使用代码来修改外观并根据您的喜好自定义图案。

   进一步增强

   可以通过添加额外的内容来扩展此技术以创建令人惊叹的复杂图案

   元素或采用 3D 变换来实现深度和交互性。