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

所以，我需要使用CSS制作一个重复的六边形图案。如果需要图像，我可以去那里，但如果可能的话，我更喜欢使用CSS

以下是我试图创建的内容：

---

基本上，我只需要一种方法来创建六边形形状，然后将文本/图像覆盖在它们上面。我还没有太多的代码，因为我不确定从哪里开始。问题是，我可以使用如（）所示的六边形的

s，但这样它们就不会连接了。我可以使用重复的六边形图案，但这样我就无法指定特定形状中所需的文本或图像的确切位置。感谢您提前提供的帮助。

如果您能够实现div shapes技巧，那么只需给每个div一个

位置：relative

（您首先必须逐个定位它们，同时设置

top

和

left

）

好了，在纯CSS中没有办法。您最好的选择是对背景使用遮罩剪裁，如下所述：（这仅在页面背景为纯色时有效，或者您可以调整并定位遮罩以匹配页面背景

然后，您可以使用csstextwrap来适应文本：

有一大堆类似的问题。例如，

（虽然安娜的答案是在我的答案之后几个月才给出的，可能是以我的答案为基础来“思考”，但她能够用一个

div

来提出一种方法这一事实值得推广，所以——但请注意十六进制的内容更为有限。）

这真是一个令人惊讶的问题。谢谢你的提问。最棒的是：

（在后面的编辑中修改为上面的fiddle链接）--它使用了imgur.com图像，这些图像在加载时似乎不太可靠，因此新的fiddle使用的是photobucket.com（如果存在持久的图像加载问题，请告诉我）。我保留了原始链接，因为下面的解释代码与此一致（与新小提琴相比，

背景尺寸

或

位置

存在一些差异）

在阅读了你的问题后，我几乎立刻想到了这个想法，但我花了一些时间来实现。我最初尝试用一个

div

和一个伪元素来获得一个“十六进制”，但据我所知，没有办法只旋转

背景图像（我需要），因此我必须添加一些额外的
div
元素来获得十六进制的右/左侧，这样我就可以使用伪元素作为
背景图像
旋转的手段

我在IE9、FF和Chrome上进行了测试。理论上，任何支持CSS3
transform
的浏览器都应该可以使用

第一次主要更新（添加说明）

我现在有时间发布一些代码解释，下面是：

首先，六边形是由30/60度关系和三角学定义的，因此这些将是涉及的关键角度。其次，我们从十六进制网格所在的“行”开始。HTML定义为（额外的
div
元素帮助构建十六进制）：


第一个十六进制文本
第二个十六进制文本
第三个十六进制文本

我们将为六边形
显示使用
内联块
，但我们不希望它们意外地缠绕到下一行并破坏网格，因此
空白：nowrap
解决了这个问题。此行的
边距
将取决于六边形之间需要多少空间，一些实验可能会导致我需要得到你想要的

.hexrow{
空白：nowrap；
/*右/左边距设置为（（子分区的宽度x sin（30））/2）
做一个相当紧密的配合；
3件装的底部看起来很相配*/
利润率：0 25px 3px；
}

使用
.hextrow
元素的直接子元素，即
div
元素，我们构成了六边形形状的基础。
宽度将驱动六边形顶部的水平方向。
高度
源自该数字，因为在正六边形上所有边的长度都相等。同样，边距是depend在间距上，但这是“重叠”的地方将出现单个六边形的一个，以使网格看起来出现。
背景图像
在此处定义一次。它的左移至少是为了适应六边形左侧增加的宽度。假设您想要居中文本，
文本对齐
处理水平方向（当然）但是与
高度匹配的
线高度
将允许垂直居中

.hexrow>div{
宽度：100px；
高度：173.2px；/*（宽度x cos（30））x 2*/
/*关于保证金：
右/左=（宽度x sin（30））不重叠
右/左=（（宽度x sin（30））/2）留下一个狭窄的间隔
*/
边际：0.25px；
位置：相对位置；
背景图片：url(http://i.imgur.com/w5tV4.jpg);
背景位置：-50px 0；/*-左侧位置-1 x宽度x正弦（30）*/
背景重复：无重复；
颜色：#ffffff；
文本对齐：居中；
线条高度：173.2px；/*等于高度*/
显示：内联块；
}

每个奇数十六进制相对于“行”向下移位，每个偶数向上移位。移位计算（宽度x cos（30）/2）也与（高度/4）相同

.hexrow>第n个子项（奇数）{
顶部：43.3px；/*（宽度x cos（30）/2）*/
}
.hexrow>div:n子级（偶数）{
顶部：-44.8px；/*-1 x（宽度x cos（30）/2）+（六角行底部边距/2））*/
}

我们使用2个子
div
元素来创建十六进制的“翅膀”。它们的大小与主十六进制矩形相同，然后旋转，并推到主十六进制的“下方”。
背景图像
被继承
<div class='row'>
    <div class='hexagon'></div>
</div>
<div class='row'>
    <div class='hexagon content ribbon' data-content='This is a test!!! 
    9/10'></div><!--
    --><div class='hexagon content longtext' data-content='Some longer text here.
       Bla bla bla bla bla bla bla bla bla bla blaaaah...'></div>
</div>