Глядя на создание трехугольной сетки с изображением 3, как это

Question

Я только что закончил некоторые курсы по HTML и CSS, но я не знаю, как создать шестиугольники. Я ищу, чтобы создать что-то вроде этого с помощью HTML и CSS:

Это то, что он выглядит следующим образом:

Спасибо, Роберт. пс. Я забил веб и 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>