css - 使用 CSS 的六边形图案

Question

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

Generate repeating hexagonal pattern with CSS3

这几乎是完美的，除了我想以另一种方式翻转六边形(即点在顶部)。我已经设法通过交换主十六进制 div 宽度/高度来相当容易地做到这一点:(hexrow > div)...但是我真的很难在其他支持的 div 上重新对齐背景图像。我一直试图弄清楚一段时间，但没有取得太大成功。

谁能发布一个 jsFiddle 来展示它是如何完成的？

这是我目前所在的位置:What i've tried

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

.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;
}

非常感谢任何帮助。

Answer 1

使用 :nth-of-type(odd) 和 :nth-of-type(even) 并为同一行的奇数/偶数六边形设置不同的边距.

---

或者您可以使用更少的标记以更简单的方式完成它 - 查看 my answer at that question和 this demo我已经做了。这个想法是，您对元素(具有 overflow: hidden)应用一系列变换，以获得锐 Angular 为 60 度 的菱形，然后您如果您愿意，可以对伪元素或子元素以相反的顺序撤消所有这些转换(具有与元素本身相同的 height，但只有 .866 的 width，因为 .866 是您实际应用 background-image 的六边形的两条平行边与其大对 Angular 线之间的距离之比。因此不会出现错位，因为背景图像仅应用于一个元素。

基本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 */