希望像这样创建一个3图像六边形网格

Question

我刚刚完成了一些HTML和CSS课程，但我对如何创建六边形一无所知。我希望使用HTML和CSS创建类似的内容：

这就是它的样子：

谢谢你，罗伯特。 PS。我得到了网络和stackoverflow，但没有发现任何接近。      我发现的只有巨大的六边形网格，但任何调整的尝试都会导致结构丢失。

Answer 1

我会做这样的事情。只要看看我对中间做了什么，然后将其应用到其余部分。查看https://jtauber.github.io/articles/css-hexagon.html

.content {

  width: 500px;
  height: 500px;
  background-color: #efefef;
  z-index: 1;
  } 


.hex {
    float: left;
    margin-left: 3px;
    margin-bottom: -26px;
}
.hex .top {
    width: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex .middle {
    width: 96px;
    height: 60px;
    background: transparent;
    border: 4px solid #6C6;
}
.hex .bottom {
    width: 0;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex-row {
    clear: left;
}
.hex-row.even {
    margin-left: 53px;
}

<br/><br/>
<div class="content">
<div class="hex-row">
        <div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
        <div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
        <div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
    </div>
</div>