html - 平铺六边形

我发现詹姆斯·陶伯（James Tauber）出色的CSS hexagon tutorial。我想使用页面末尾显示的伪元素方法来创建一个平顶六边形网格，该网格将填充整个视口。我为六边形本身编写的代码如下：

.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。

我在将伪元素方法与教程中显示的切片示例结合使用时遇到麻烦。如何重复形状以填充页面-甚至它们将在视口边缘附近留下的小间隙？

最佳答案

这是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>

关于html - 平铺六边形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39234502/