Вёрстка hexagon [закрыт]

121

25 октября 2019, 07:40

Прошу помощи у более опытных ребят. Учусь только 3 месяца, взял себе второй макет для учебы и там вот такая секция:

Как её можно сверстать, проблема в том, что на соте разные бордеры?
Плюс, как это грамотно отпозиционировать не статично?
Помогите пожалуйста, всю голову сломал уже.

Answer 1

1 блок, для наглядности, если вы не понимаете как:

.hexagon { 
  position: relative; 
  width: 300px;  
  height: 173.21px; 
  background-color: #84ac9b; 
  margin: 86.60px 0; 
  border-left: solid 1px #333333; 
  border-right: solid 1px #333333; 
} 
 
.hexagon:before, 
.hexagon:after { 
  content: ""; 
  position: absolute; 
  z-index: 1; 
  width: 212.13px; 
  height: 212.13px; 
  -webkit-transform: scaleY(0.5774) rotate(-45deg); 
  -ms-transform: scaleY(0.5774) rotate(-45deg); 
  transform: scaleY(0.5774) rotate(-45deg); 
  background-color: inherit; 
  left: 42.9340px; 
} 
 
.hexagon:before { 
  top: -106.0660px; 
  border-top: solid 1.4142px #333333; 
  border-right: solid 1.4142px #333333; 
} 
 
.hexagon:after { 
  bottom: -106.0660px; 
  border-bottom: solid 1.4142px #333333; 
  border-left: solid 1.4142px #333333; 
}