CSS 六角形图案

我找到了一个关于如何使用 CSS 创建六边形图案的很棒的 stackoverflow 答案。

使用 CSS3 生成重复的六边形图案 https://stackoverflow.com/questions/10062887/generate-repeating-hexagonal-pattern-with-css3/10068351#10068351

它几乎是完美的，除了我想以另一种方式翻转六边形（即，所以点在顶部）。我已经通过交换主十六进制 div 宽度/高度来相当轻松地做到了这一点：(hexrow > div)...但是我真的很难重新对齐其他支持 div 上的背景图像。我已经尝试解决这个问题有一段时间了，但没有取得多大成功。

有人可以发布一个 jsFiddle 来展示它是如何完成的吗？

这就是我目前所处的位置：我尝试过的 http://jsfiddle.net/mqyCb/216/

..我相信这是我需要修改的：

.hexrow > div > div:first-of-type:before {
    content: '';
    position: absolute;
    width: 200px; /* width of main + margin sizing */
    height: 100%;
    background-image: inherit;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 120% auto;
    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;
}

非常感谢任何帮助。

Use :nth-of-type(odd) and :nth-of-type(even)并为同一行的奇数/偶数六边形设置不同的边距。

或者你可以用更简单的方式来做，用更少的标记 - 检查我对这个问题的回答 https://stackoverflow.com/a/13069271/1397351 and 这个演示 http://codepen.io/thebabydino/full/hxEwA我已经做了。这个想法是对元素应用一系列变换（它具有overflow: hidden）以获得锐角为的菱形60 degrees然后，如果您愿意，您可以以相反的顺序撤消伪元素或子元素的所有这些转换（具有相同的height作为元素本身，但仅.866 of its width，因为 0.866 是六边形两条平行边与其大对角线之间的距离之比），您实际在其上应用background-image。因此不会出现错位的情况，因为背景图像仅应用于一个元素。

Basic HTML结构：

<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>

相关的CSS:

.row { margin: -8% 0%; text-align: center; }
.row:first-child { margin-top: 2.25%; }
.hexagon {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0 -1.5%;
    padding: 16%;
    transform: rotate(-30deg) skewX(30deg) scaleY(.866); /* .866 = sqrt(3)/2 */
}
.hexagon:before {
    display: block;
    position: absolute; /* 86.6% = (sqrt(3)/2)*100% = .866*100% */
    right: 6.7%; bottom: 0; left: 6.7%; top: 0; /* 6.7% = (100% -86.6%)/2 */
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg); /* 1.155 = 2/sqrt(3) */
    background-color: rgba(30,144,255,.56);
    background-size: cover;
    content: '';
}
.row:first-child .hexagon:first-child:before {
    background-image: url(img.jpg); 
} 
/* and so on, add background images for all hexagons */