Ich suche ein 3-Bild-Sechseck-Gitter wie dieses

Question

Ich habe gerade einige Kurse in HTML und CSS abgeschlossen, aber ich habe keine Ahnung, wie man Sechsecke erstellt. Ich suche etwas wie diese mit Hilfe von HTML und CSS zu erstellen:

Dies ist, wie es aussieht:

Danke, Robert. ps. Ich habe das Web und Stackoverflow gewertet, aber nichts gefunden. Alles, was ich fand, waren große riesige Sechseck-Gitter, aber jeder Versuch, sich anzupassen, führte zu Strukturverlust.

Answer 1

Ich würde so etwas tun. Schau einfach, was ich mit der Mitte gemacht habe, und wende das dann an den Rest an. Check out 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>