html - 平铺六边形

Question

我找到了 James Tauber 的伟大 CSS hexagon tutorial .我想使用页面末尾显示的伪元素方法来创建一个平顶六边形网格来填充整个视口(viewport)。我为六边形本身编写的代码如下:

.hex {
  float:left;
  position: relative;
  width: 15vw;
  height: 25vw;
  background-color: #64C7CC;
  margin-left: 8vw;
}

.hex:before,
.hex:after {
  position: absolute;
  content: "";
  border-top: 12.5vw solid transparent;
  border-bottom: 12.5vw solid transparent;
}

.hex:before {
  border-right: 9vw solid #64C7CC;
  right:15vw;
}

.hex:after {
    border-left: 9vw solid #64C7CC;
    left:15vw;
}

这是 fiddle .

我无法将伪元素方法与教程中显示的平铺示例结合使用。我怎样才能重复形状来填充页面 - 即使是它们将在视口(viewport)边缘附近留下的小间隙？

Answer 1

这是 Demo

.hex {
  float:left;
  position: relative;
  width: 15vw;
  height: 25vw;
  background-color: #64C7CC;
  margin: 12vw;
}

.hex:before,
.hex:after {
  position: absolute;
  content: "";
  border-top: 12.5vw solid transparent;
  border-bottom: 12.5vw solid transparent;
}

.hex:before {
  border-right: 9vw solid #64C7CC;
  right:15vw;
}

.hex:after {
    border-left: 9vw solid #64C7CC;
    left:15vw;
}

<div class="hex">
</div>

<div class="hex">
</div>