想要创建一个像这样的3图像六边形网格

Question

我刚刚完成了HTML和CSS中的一些课程，但我对如何创建六边形一无所知。我期待创造这样的使用HTML和CSS：

这是什么样子：

谢谢你，罗伯特。 ps。我拿下了网络和计算器，但没有找到任何接近的东西。我发现的所有东西都是巨大的六边形网格，但是任何尝试调整都会导致结构损失。

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>