Tengo una fila de hexágonos usando CSS, pero necesito que haya 7 en una sola fila y, por alguna razón, han sido cortados (aparte del hexágono del medio) como se muestra aquí:

enter image description here

Necesito que se parezcan más a: ingrese la descripción de la imagen aquí

Este es el código que tengo hasta ahora:

.hex-container {
  width:310px;
  text-align:center;
  position:relative; 
}

.hex-container div{
  display:inline-block;
  width:120px;
  height:104px;
  margin:0 -13px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.hex-container div::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(45deg, #f09800,#fad900);
}

.hex-container div:nth-child(1),
.hex-container div:nth-child(3),
.hex-container div:nth-child(4),
.hex-container div:nth-child(6) {
  margin-top:54px;
  margin-bottom:-54px;
}
<div class="hex-container">
   <div></div>
   <div></div>
   <div></div>
</div>

Esto se modificó de este tutorial y con la ayuda de un vieja pregunta que hice en Stack Overflow

1
Web Develop Wolf 25 ago. 2020 a las 14:27

2 respuestas

La mejor respuesta

Elimine el margen inferior negativo y use vertical-align:top

.hex-container {
  width:310px;
  text-align:center;
  position:relative; 
}

.hex-container div{
  display:inline-block;
  vertical-align:top; /* here */
  width:120px;
  height:104px;
  margin:0 -13px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.hex-container div::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(45deg, #f09800,#fad900);
}

.hex-container div:nth-child(odd){
  margin-top:54px;
}
<div class="hex-container">
<div></div><div></div><div></div>
</div>

Y el código completo con tus 7 formas:

.hex-container {
  text-align:center;
  width:700px;
  position:relative; 
}

.hex-container div{
  display:inline-block;
  vertical-align:top; /* here */
  width:120px;
  height:104px;
  margin:0 -13px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.hex-container div::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(45deg, #f09800,#fad900);
}

.hex-container div:nth-child(odd){
  margin-top:54px;
}
<div class="hex-container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
1
Temani Afif 25 ago. 2020 a las 11:38

Su elemento :before absolutamente posicionado tiene la altura de un ancestro posicionado relativamente (.hex-container).

Establezca su altura en lo que necesita (por ejemplo, 200 px) y verá hexágonos enteros.

0
Ivana G.B. 25 ago. 2020 a las 11:34