-1

Minha ideia é criar uma galeria onde cada item terá um formato hexagonal alinhados de uma maneira que pareça uma colmeia.

Vejam como esta até o momento:

.galeria {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
/*justify-content: center;*/
}

.hexagonal {
-webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 5% 75%, 5% 25%);
padding:10px;
background:linear-gradient(grey,lightgrey);
width:200px;
height:200px;
cursor:pointer;
}
<div class="galeria">
<div class="hexagonal">

</div>

<div class="hexagonal">

</div>

<div class="hexagonal">

</div>

<div class="hexagonal">

</div>

<div class="hexagonal">

</div>

<div class="hexagonal">

</div>
</div>

O que eu quero fazer é: Conforme for adicionando hexágonos ele vão acabar formando uma segunda linha. Até aqui okay. Mas quando formar essa nova linha ela se posicione de tal forma que os hexágonos de baixo se encaixem nos hexágonos de cima no intuito de forma um favo ou colmeia.

Isso é uma experiência que estou fazendo, mas se funcionar legal pretendo usar nos meus próximos projetos.

2 Respostas 2

1

Quase! O que eu quero é forma uma colmeia. Eu até consegui fazendo os hexágonos deitados. Veja:

.galeria-hex {
    width:1010px;
    margin:auto;
    background: #eee;
    border: 1px solid #ddd;
    padding: 15px 60px 95px 15px;
}

.galeria-hex .item {
    margin:0;
    height:180px;
    width:200px;
    position:relative;
    overflow:hidden;
    display:inline-block;
    margin-right:-35px;
    vertical-align:middle;
}

.galeria-hex .item span {
    overflow:hidden;
    position:absolute;
    height:110%;
    width:100%;
    top:-5%;
    left:0;
    background:blue;
    transform:rotate(45.5deg) skew(16.5deg,15.5deg);
}

.galeria-hex .item span img {
    transform:rotate(-45deg) skew(0,0) scale(1.4,0.77);
    border:solid;
    width: 101%;
}

.item:nth-child(odd) {
    margin-bottom:15px;
}
.item:nth-child(even) {
    margin-bottom:-180px;
}
<ul class="galeria-hex">
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
  <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
</ul>

Só que estou tentando fazer eles ficarem de pé. Estou tendo umas ideias, vou testar e se der certo compartilho aqui pra gente.

-1

Eu fiz um exemplo do seu código no Codepen: https://codepen.io/rodrigos4y/pen/oNjJMod Veja se é essa a ideia.

Nesse caso eu coloquei no .galeria flex-direction: row; e no .hexagonal margin: 0 -11px para dar uma ideia de colmeia.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .