Question

我发现詹姆斯陶伯很棒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。

我在将伪元素方法与教程中显示的平铺示例结合时遇到问题。如何重复填充页面的形状 - 即使是它们将留在视口边缘附近的小间隙？

Answer 1

以下是Demo

＆＃13;

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

＆＃13;

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

＆＃13;

平铺平顶六边形

1 个答案: