带有 CSS 的六边形图案

Question

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

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）应用一系列变换以获得锐角为60 degrees 的菱形，然后您以相反的顺序撤消所有这些变换以获取伪元素或如果您愿意，可以使用子元素（与元素本身具有相同的 height，但只有 .866 的 width，因为 .866 是六边形的两个平行边与其大对角线之间的距离之比）您实际在其上应用background-image。所以没有错位的可能性，因为背景图像只应用于一个元素。

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

Answer 2

我使用了边框。

Codepen.io

<div id="hex"></div>

和

#hex {
  display: inline-block;
  position: relative;
  width: 190px;
  height: 220px;
  background: no-repeat url("http://placekitten.com/200/300") 50% 50%;
}

div:before {

  content: " "; 
  display: block; 
  border-top: 0px solid transparent;
  border-bottom: 55px solid transparent;
  order-left: 95px solid white;
  border-right: 95px solid white;
}

div:after {

  content: " "; 
  display: block; 
  border-left: 95px solid white;
  border-top: 55px solid transparent;
  border-right: 95px solid white;
  margin-top:110px
}