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

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

在本文中，我们将深入研究 Stack Overflow 上提出的一个有趣的问题：创建一个重复的六边形图案使用 CSS 的六边形图案。虽然图像就足够了，但这里的目标是纯粹使用 CSS 来完成这一壮举。

理解挑战

用户设想一个视觉上迷人的六边形图案，能够在它们上面分层文本或图像。主要挑战在于无缝连接六边形，同时保持对每个形状内元素放置的精确控制。

初始方法：利用

s

一个直接的方法涉及利用六边形形状的

。然而，这种方法存在局限性：六边形无法有效连接。使用重复六边形图案的其他尝试会阻碍将内容放置在特定的六边形形状中。

突破：伪元素和精确旋转

为了克服这些限制，我们引入了一种创新的方法依赖于单个

的方法元素与伪元素配对。该技术涉及旋转背景图像，实现六边形之间的无缝连接。

实现细节

1. 六边形行：

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

2. 六边形结构：

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

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

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

4. 六边形“翅膀”：

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

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

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

   • 文本放置：

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

   • 其他自定义：

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

   示例实现

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

   进一步增强

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

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