问题描述
所以，我需要做一个重复的六角形图案，使用CSS。如果需要图片，我可以去那里，但我更喜欢只使用CSS，如果可能。
这里有一个想法我想创建： / p>
>
基本上，我只需要一种方法来创建六边形形状，然后在它们之上叠加文本/图像。我还没有太多的代码，因为我不知道从哪里开始。问题是，我可以使用< div> 以六角形的形状，如（），但是它们不会连接。我可以使用重复的六边形图案，但我不能指定的文字或图像的确切位置，我需要在特定的形状。非常感谢您的帮助。
（虽然Ana的答案来自我的几个月后，认为从，事实上她能够提出一个使用单一 div 的方法是值得推广的，所以 - 但请注意，十六进制中的内容更受限制。）
这是一个真正了不起的问题。谢谢你问。伟大的事情是：
（在以后的编辑修改链接上面） - 它使用imgur.com图像，这似乎不是非常可靠的加载，所以新的小提琴使用photobucket.com（让我知道是否有持续的图片加载问题）。我保持原来的链接，因为下面的解释代码（在 background-size 或位置到新的小提琴）。
这个想法在我读完你的问题后几乎立刻就来了，但花了一些时间来实现。我最初尝试得到一个单一的十六进制与单个 div 和只是伪元素，但最好的我可以告诉，没有办法只是旋转 background-image （我需要），所以我不得不添加一些额外的 div 元素来获得十六进制的右/ ，因此我可以使用伪元素作为 background-image 旋转的手段。
IE9，FF和Chrome。理论上任何支持CSS3 transform 的浏览器都应该工作。
/ strong>
我现在有一些时间来发布一些代码解释，所以这里：
六边形由30/60度关系和三角法定义，因此这些将是所涉及的关键角度。第二，我们从一个行开始为十六进制网格驻留。HTML定义为（额外 div 元素帮助构建十六进制）：
< div class =hexrow>
< div>
< span>第一个十六进制文本< / span>
< div>< / div>
< div>< / div>
< / div>
< div>
< span>第二个十六进制文本< / span>
< div>< / div>
< div>< / div>
< / div>
< div>
< span>第三个十六进制文本< / span>
< div>< / div>
< div>< / div>
< / div>
< / div>
我们将使用 inline-block 对于六角形显示，但我们不希望它们意外包装到下一行并破坏网格，因此 white-space：nowrap 解决了这个问题。此行上的 margin 将取决于您想要的十六进制之间的空间大小，可能需要一些实验来获得所需的内容。
.hexrow {
white-space：nowrap;
/ * right / left margin set at（（width of child div x sin（30））/ 2）
使得紧贴;
a 3px bottom看起来匹配* /
margin：0 25px 3px;
}
使用 .hexrow 这些只是 div 元素，我们形成了十六进制形状的基础。 width 将驱动十六进制顶部的水平方向， height 是从该数字派生的，因为所有边在正六边形上的长度相等。再次，余量将取决于间距，但这是单个六边形的重叠将发生，使网格看起来发生的地方。 background-image 定义一次，就在这里。左移的是至少适应六边形左侧的添加宽度。假设你想要中心文本， text-align 处理水平（当然），但 line-height 匹配 height 将允许垂直居中。
.hexrow> div {
width：100px;
height：173.2px; / *（width x cos（30））x 2 * /
/ *对于边距：
right / left =（width x sin（30））不重叠
right / left = （（width x sin（30））/ 2）留一个窄分隔
* /
margin：0 25px;
position：relative;
background-image：url（http://i.imgur.com/w5tV4.jpg）;
background-position：-50px 0; / * -left position -1 x width x sin（30）* /
background-repeat：no-repeat;
color：#ffffff;
text-align：center;
line-height：173.2px; / * equals height * /
display：inline-block;
}
每个奇数相对于行向下移动，并且每个偶向上移动。移位计算（宽度x cos（30）/ 2）也与（height / 4）相同。
.hexrow> div：nth-child（odd）{
top：43.3px; / *（width x cos（30）/ 2）* /
}
.hexrow> div：nth-child（even）{
top：-44.8px; / * -1 x（（width x cos（30）/ 2）+（hexrow bottom margin / 2））* /
}
我们使用2个 div 元素来创建十六进制的翅膀。它们的大小与主六角矩形相同，然后旋转，并推到主十六进制下方。 背景图像是继承的，因此图像是相同的（当然），因为翅膀中的图像将被排队主矩形。伪元素用于生成图像，因为它们需要重新旋转回水平（因为我们旋转它们的父 div 来创建翅膀） 。
第一个的：before 之前会翻译其背景，负值的宽度等于主要部分的十六进制加上主十六进制的原始背景移位。第二个的：before 将更改翻译的原点，并将在x轴上移动主宽度，在y轴上移动一半高度。 / p>
.hexrow> div> div：first-of-type {
position：absolute;
width：100％;
height：100％;
top：0;
left：0;
z-index：-1;
overflow：hidden;
background-image：inherit;
-ms-transform：rotate（60deg）; / * IE 9 * /
-moz-transform：rotate（60deg）; / * Firefox * /
-webkit-transform：rotate（60deg）; / * Safari和Chrome * /
-o-transform：rotate（60deg）; / * Opera * /
transform：rotate（60deg）;
}
.hexrow> div> div：first-of-type：before {
content：'';
position：absolute;
width：200px; / *主宽度+边距大小* /
height：100％;
background-image：inherit;
background-position：top left;
background-repeat：no-repeat;
bottom：0;
left：0;
z-index：1;
-ms-transform：rotate（-60deg）translate（-150px，0）; / * IE 9 * /
-moz-transform：rotate（-60deg）translate（-150px，0）; / * Firefox * /
-webkit-transform：rotate（-60deg）translate（-150px，0）; / * Safari和Chrome * /
-o-transform：rotate（-60deg）translate（-150px，0）; / * Opera * /
transform：rotate（-60deg）translate（-150px，0）;
-ms-transform-origin：0 0; / * IE 9 * /
-webkit-transform-origin：0 0; / * Safari and Chrome * /
-moz-transform-origin：0 0; / * Firefox * /
-o-transform-origin：0 0; / * Opera * /
transform-origin：0 0;
}
.hexrow> div> div：last-of-type {
content：'';
position：absolute;
width：100％;
height：100％;
top：0;
left：0;
z-index：-2;
overflow：hidden;
background-image：inherit;
-ms-transform：rotate（-60deg）; / * IE 9 * /
-moz-transform：rotate（-60deg）; / * Firefox * /
-webkit-transform：rotate（-60deg）; / * Safari和Chrome * /
-o-transform：rotate（-60deg）; / * Opera * /
transform：rotate（-60deg）;
}
.hexrow> div> div：last-of-type：before {
content：'';
position：absolute;
width：200px; / *起始宽度+边距大小* /
height：100％;
background-image：inherit;
background-position：top left;
background-repeat：no-repeat;
bottom：0;
left：0;
z-index：1;
/ * translate属性是初始宽度（100px）和半高度（173.2 / 2 = 86.6）* /
-ms-transform：rotate（60deg）translate（100px，86.6px） ; / * IE 9 * /
-moz-transform：rotate（60deg）translate（100px，86.6px）; / * Firefox * /
-webkit-transform：rotate（60deg）translate（100px，86.6px）; / * Safari和Chrome * /
-o-transform：rotate（60deg）translate（100px，86.6px）; / * Opera * /
transform：rotate（60deg）translate（100px，86.6px）;
-ms-transform-origin：100％0; / * IE 9 * /
-webkit-transform-origin：100％0; / * Safari和Chrome * /
-moz-transform-origin：100％0; / * Firefox * /
-o-transform-origin：100％0; / * Opera * /
transform-origin：100％0;
}
此 span 您的文本。 line-height 重置为使文本行正常，但 vertical-align：middle line-height 在父级上较大。 白色空间被重置，因此它允许再次包装。
左/右边距可以设置为负，以允许文本进入十六进制的翅膀 .hexrow> div> span {
display：inline-block;
margin：0 -30px;
line-height：1.1;
vertical-align：middle;
white-space：normal;
}
您可以单独定位行中的行和单元格以更改图像， code> span 文本设置或不透明度，或容纳较大的图像（将其移动到所需位置）等。这是第二行的操作。 p>
.hexrow：nth-child（2）> div：nth-child（1）{
background-image：url（http://i.imgur.com/7Un8Y.jpg）;
}
.hexrow：nth-child（2）> div：nth-child（1）> span {
/ *更改一些其他设置* /
margin：0 -20px;
color：black;
font-size：.8em;
font-weight：bold;
}
.hexrow：nth-child（2）> div：nth-child（2）{
background-image：url（http://i.imgur.com/jeSPg.jpg）;
}
.hexrow：nth-child（2）> div：nth-child（3）{
background-image：url（http://i.imgur.com/Jwmxm.jpg）;
/ *你可以移动一个大的背景图像，但它可以得到复杂的
最好保持图像的总宽度（200像素）和高度（174像素）
十六进制是。
* /
background-position：-150px -120px;
opacity：.3;
color：black;
}
.hexrow：nth-child（2）> div：nth-child（3）> div：before {
/ *你可以移动一个大的背景图片，但它可以得到复杂的
最好保持图像的总宽度（200像素）和高度（174像素）
十六进制。
* /
background-position：-100px -120px; / *左移在伪元素中总是小于基本移位量* /
}
.hexrow：nth-child（2）> div：nth-child（4）{
background-image：url（http://i.imgur.com/90EkV.jpg）;
background-position：-350px -120px;
}
.hexrow：nth-child（2）> div：nth-child（4）> div：before {
background-position：-300px -120px;
}
So, I need to make a repeating hexagonal pattern, using CSS. If images are needed, I can go there, but I'd prefer to just use CSS if possible.
Here's an idea of what I'm trying to create:
Basically, I just need a way to create the hexagonal shapes, and then overlay text/images on top of them. I don't have much code yet, because I'm not really sure where to start. The problem is, I could just use <div>s in the shape of a hexagon like shown in (http://css-tricks.com/examples/ShapesOfCSS/), but then they wouldn't be connecting. I could use a repeating hexagon pattern, but then I wouldn't be able to specify the exact location of the text or images I need in specific shapes. Thanks for any help in advance.
解决方案 (Though Ana's answer came in months after mine, probably using mine as a base to "think from", the fact that she was able to come up with a method using a single div is worth promoting, so check out her answer too--but note that content in the hex is more limited.)
This was a truly amazing question. Thank you for asking it. The great thing is the fact that:
This Fiddle Proves You Can Do It!
Original Fiddle Used (modified in later edit to fiddle link above)--it utilized imgur.com images, which were not seeming to be very reliable in loading, so the new fiddle is using photobucket.com (let me know if there are persistent image loading issues). I've kept the original link because the explanation code below goes with that (there are a few differences in background-size or position to the new fiddle).
The idea came to me almost instantly after reading your question, but took some time to implement. I originally tried getting a single "hex" with a single div and just pseudo elements, but as best I could tell, there was no way to just rotate the background-image (which I needed), so I had to add some extra div elements to get the right/left sides of the hex, so that I could then use the pseudo elements as a means of background-image rotation.
I tested in IE9, FF, and Chrome. Theoretically any browser supporting CSS3 transform it should work in.
First Main Update (added explanation)
I have some time now to post some code explanation, so here goes:
First, hexagons are defined by 30/60 degree relationships and trigonometry, so those will be the key angles involved. Second, we start with a "row" for the hex grid to reside in. The HTML is defined as (the extra div elements help build the hex):
<div class="hexrow">
<div>
<span>First Hex Text</span>
<div></div>
<div></div>
</div>
<div>
<span>Second Hex Text</span>
<div></div>
<div></div>
</div>
<div>
<span>Third Hex Text</span>
<div></div>
<div></div>
</div>
</div>
We are going to use inline-block for the hexagon display, but we don't want them to accidentally wrap to the next line and ruin the grid, so white-space: nowrap solves that issue. The margin on this row is going to depend on how much space you want between hex's, and some experimentation may be needed to get what you want.
.hexrow {
white-space: nowrap;
/*right/left margin set at (( width of child div x sin(30) ) / 2)
makes a fairly tight fit;
a 3px bottom seems to match*/
margin: 0 25px 3px;
}
Using the immediate children of the .hexrow which are just div elements, we form the basis for the hex shape. The width will drive the horizontal of the top of the hex, the height is derived from that number since all the sides are equal length on a regular hexagon. Again, margin is going to depend on spacing, but this is where the "overlap" of the individual hexagons is going to occur to make the grid look occur. The background-image is defined once, right here. The shift left on it is to accommodate at least the added width for the left side of the hex. Assuming you want centered text, the text-align handles the horizontal (of course) but the line-height that matches the height is going to allow for a vertical centering.
.hexrow > div {
width: 100px;
height: 173.2px; /* ( width x cos(30) ) x 2 */
/* For margin:
right/left = ( width x sin(30) ) makes no overlap
right/left = (( width x sin(30) ) / 2) leaves a narrow separation
*/
margin: 0 25px;
position: relative;
background-image: url(http://i.imgur.com/w5tV4.jpg);
background-position: -50px 0; /* -left position -1 x width x sin(30) */
background-repeat: no-repeat;
color: #ffffff;
text-align: center;
line-height: 173.2px; /*equals height*/
display: inline-block;
}
Each odd number hex we are going to shift down in relation to the "row" and each even shift up. The shift calculation ( width x cos(30) / 2 ) is also the same as (height / 4).
.hexrow > div:nth-child(odd) {
top: 43.3px; /* ( width x cos(30) / 2 ) */
}
.hexrow > div:nth-child(even) {
top: -44.8px; /* -1 x( ( width x cos(30) / 2) + (hexrow bottom margin / 2)) */
}
We are using 2 child div elements to create the "wings" of the hex. They are sized the same as the main hex rectangle, and then rotated, and pushed "below" the main hex. Background-image is inherited so that the image is the same (of course), because the image in the "wings" is going to be "lined up" to that in the main rectangle. The pseudo elements are used to generate the images, because they need to be "rerotated" back to horizontal (since we rotated the parent div of them to create the "wings").
The :before of the first will translate its background the width of the negative amount equal to the main portion of the hex plus the original background shift of the main hex. The :before of the second will change the origin point of the translation and will shift the main width on the x-axis, and half the height on the y-axis.
.hexrow > div > div:first-of-type {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
background-image: inherit;
-ms-transform:rotate(60deg); /* IE 9 */
-moz-transform:rotate(60deg); /* Firefox */
-webkit-transform:rotate(60deg); /* Safari and Chrome */
-o-transform:rotate(60deg); /* Opera */
transform:rotate(60deg);
}
.hexrow > div > div:first-of-type:before {
content: '';
position: absolute;
width: 200px; /* width of main + margin sizing */
height: 100%;
background-image: inherit;
background-position: top left;
background-repeat: no-repeat;
bottom: 0;
left: 0;
z-index: 1;
-ms-transform:rotate(-60deg) translate(-150px, 0); /* IE 9 */
-moz-transform:rotate(-60deg) translate(-150px, 0); /* Firefox */
-webkit-transform:rotate(-60deg) translate(-150px, 0); /* Safari and Chrome */
-o-transform:rotate(-60deg) translate(-150px, 0); /* Opera */
transform:rotate(-60deg) translate(-150px, 0);
-ms-transform-origin: 0 0; /* IE 9 */
-webkit-transform-origin: 0 0; /* Safari and Chrome */
-moz-transform-origin: 0 0; /* Firefox */
-o-transform-origin: 0 0; /* Opera */
transform-origin: 0 0;
}
.hexrow > div > div:last-of-type {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -2;
overflow: hidden;
background-image: inherit;
-ms-transform:rotate(-60deg); /* IE 9 */
-moz-transform:rotate(-60deg); /* Firefox */
-webkit-transform:rotate(-60deg); /* Safari and Chrome */
-o-transform:rotate(-60deg); /* Opera */
transform:rotate(-60deg);
}
.hexrow > div > div:last-of-type:before {
content: '';
position: absolute;
width: 200px; /* starting width + margin sizing */
height: 100%;
background-image: inherit;
background-position: top left;
background-repeat: no-repeat;
bottom: 0;
left: 0;
z-index: 1;
/*translate properties are initial width (100px) and half height (173.2 / 2 = 86.6) */
-ms-transform:rotate(60deg) translate(100px, 86.6px); /* IE 9 */
-moz-transform:rotate(60deg) translate(100px, 86.6px); /* Firefox */
-webkit-transform:rotate(60deg) translate(100px, 86.6px); /* Safari and Chrome */
-o-transform:rotate(60deg) translate(100px, 86.6px); /* Opera */
transform:rotate(60deg) translate(100px, 86.6px);
-ms-transform-origin: 100% 0; /* IE 9 */
-webkit-transform-origin: 100% 0; /* Safari and Chrome */
-moz-transform-origin: 100% 0; /* Firefox */
-o-transform-origin: 100% 0; /* Opera */
transform-origin: 100% 0;
}
This span houses your text. The line-height is reset to make the lines of text normal, but the vertical-align: middle works since the line-height was larger on the parent. The white-space is reset so it allows wrapping again. The left/right margin can be set to negative to allow the text to go into the "wings" of the hex.
.hexrow > div > span {
display: inline-block;
margin: 0 -30px;
line-height: 1.1;
vertical-align: middle;
white-space: normal;
}
You can individual target rows and cells in those rows to change images, or span text settings, or opacity, or accommodate a larger image (to shift it to the place you want), etc. That is what the following do for the second row.
.hexrow:nth-child(2) > div:nth-child(1) {
background-image: url(http://i.imgur.com/7Un8Y.jpg);
}
.hexrow:nth-child(2) > div:nth-child(1) > span {
/*change some other settings*/
margin: 0 -20px;
color: black;
font-size: .8em;
font-weight: bold;
}
.hexrow:nth-child(2) > div:nth-child(2) {
background-image: url(http://i.imgur.com/jeSPg.jpg);
}
.hexrow:nth-child(2) > div:nth-child(3) {
background-image: url(http://i.imgur.com/Jwmxm.jpg);
/*you can shift a large background image, but it can get complicated
best to keep the image as the total width (200px) and height (174px)
that the hex would be.
*/
background-position: -150px -120px;
opacity: .3;
color: black;
}
.hexrow:nth-child(2) > div:nth-child(3) > div:before {
/*you can shift a large background image, but it can get complicated
best to keep the image as the total width (200px) and height (174px)
that the hex would be.
*/
background-position: -100px -120px; /* the left shift is always less in the pseudo elements by the amount of the base shift */
}
.hexrow:nth-child(2) > div:nth-child(4) {
background-image: url(http://i.imgur.com/90EkV.jpg);
background-position: -350px -120px;
}
.hexrow:nth-child(2) > div:nth-child(4) > div:before {
background-position: -300px -120px;
}
这篇关于用CSS3生成重复的六角形图案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！