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

Question

因此，我需要使用CSS制作重复的六角形图案。如果需要图像，我可以去那里，但是如果可能的话，我宁愿只使用CSS。基本上，我只需要一种创建六边形形状的方法，然后将文本/图像覆盖在它们之上。我还没有太多代码，因为我不太确定从哪里开始。问题是，我只能使用<div>（http://css-tricks.com/examples/ShapesOfCSS/）中所示的六边形形状的s ，但是它们不会连接。我可以使用重复的六边形图案，但是无法指定特定形状的文本或图像的确切位置。感谢您的任何帮助。

Answer 1

实际上，可以使用每个六边形只有一个元素以及用于背景图像和文本的伪元素来完成此操作。

演示

基本的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>

您可以有更多行，只需要n在奇数行上有六边形，在偶数行上有六边形n+/-1。

相关CSS：

* { box-sizing: border-box; margin: 0; padding: 0; }

.row { margin: -18.5% 0; text-align: center; }

.row:first-child { margin-top: 7%; }

.hexagon {

    position: relative;

    display: inline-block;

    overflow: hidden;

    margin: 0 8.5%;

    padding: 16%;

    transform: rotate(30deg) skewY(30deg) scaleX(.866); /* .866 = sqrt(3)/2 */

}

.hexagon:before, .content:after {

    display: block;

    position: absolute;

    /* 86.6% = (sqrt(3)/2)*100% = .866*100% */

    top: 6.7%; right: 0; bottom: 6.7%; left: 0; /* 6.7% = (100% -86.6%)/2 */

    transform: scaleX(1.155) /* 1.155 = 2/sqrt(3) */ 

               skewY(-30deg) rotate(-30deg);

    background-color: rgba(30,144,255,.56);

    background-size: cover;

    content: '';

}

.content:after { content: attr(data-content); }

/* add background images to :before pseudo-elements */

.row:nth-child(n) .hexagon:nth-child(m):before {

    background-image: 

        url(background-image-mxn.jpg); 

}

Answer 2

我将提供有关如何创建六边形形状的简单演示。

.hex {

  width: 40px;

  height: 70px;

  margin: 20px;

  overflow: hidden;

}

.hex:before {

  content: "";

  transform: rotate(45deg);

  background: #f00;

  width: 50px;

  height: 50px;

  display: inline-block;

  margin: 10px -5px 10px -5px;

}

<div class="hex">

</div>