3

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

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

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

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

这就是我目前所处的位置：我尝试过的

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

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

非常感谢任何帮助。

4

2 回答 2

1

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

或者你可以用更简单的方式来做，用更少的标记——检查我在那个问题上的回答和我刚刚做的这个演示。这个想法是，您对元素（具有 ）应用一系列变换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 */
于 2013-01-19T16:36:24.883 回答
0

我使用了边框。

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
}
于 2013-01-22T09:08:29.863 回答