このような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>