4

Encontrei um código que monta um conjunto de hexágonos (tipo uma colméia) de forma que seja responsivo. Fiz umas adaptações para atender ao que pretendo como resultado, que não é exatamente um grid. Simplesmente acrescentei uma classe para esconder o hexágono que eu não quero e ter uma espécie de diagrama.

Enfim, o problema que estou tendo é que o espaço entre cada hexágono está variando de acordo com a área de exibição. Por exemplo, se eu pegar o navegador e for mudando o tamanho da janela, quanto maior, menos espaço entre os elementos, chegando até sobrepor um ao outro.

Já tentei encontrar outras alternativas mas a maioria é com o hexágono com a base triangular.

Aqui está o que tenho:

* { box-sizing: border-box; margin: 0; padding: 0; }
.row { margin: -18.8% 0; text-align: center; }
.row:first-child { margin-top: 0%; }
.hexagon.hide { visibility: hidden; }
.hexagon {
	position: relative;
	display: inline-block;
	overflow: hidden;
	margin: 0 8.2%;
	padding: 16%;
	transform: rotate(30deg) skewY(30deg) scaleX(.866);
}
.hexagon:before, .content:after {
	content: '';
	display: block;
	position: absolute;
	top: 7.8%; right: 0; bottom: 7.8%; left: 0;
	transform: scaleX(1.155) skewY(-30deg) rotate(-30deg);
	background-color: rgb(30, 144, 255);
}
.content:after {
	content: attr(data-content);
	top: 50%;
	margin: -1.2em 0;
	width: 100%;
	height: 2.4em;
	font: 1em/2.4 Century Gothic;
}
<div>
    <div class="row">
        <div class="hexagon hide"></div>
        <div class="hexagon content" data-content="foo"></div>
    </div>
    <div class="row">
        <div class="hexagon hide"></div>
    </div>
    <div class="row">
        <div class="hexagon content" data-content="foo"></div>
        <div class="hexagon content" data-content="foo"></div>
    </div>
    <div class="row">
        <div class="hexagon content" data-content="foo"></div>
    </div>
    <div class="row">
        <div class="hexagon hide"></div>
        <div class="hexagon hide"></div>
    </div>
    <div class="row">
        <div class="hexagon content" data-content="foo"></div>
    </div>
</div>

7
  • Acho que o espaçamento varia com o tamanho da janela porque várias medidas no estilo estão em porcentagem. Mudar para valores absolutos talvez ajude. Commented 27/03/2017 às 17:04
  • Talvez um fiddle (jsfiddle.net) ajude a quem vier ler a pergunta. O SO executa o seu código mas renderiza em um componente que não muda de tamanho conforme a janela é redimensionada. Commented 27/03/2017 às 17:05
  • Oi @Renan, agradeço a resposta. Executando aqui no SO e indo no botão "página toda" é possível reproduzir o que estou relatando. Agora, se está em porcentagem ou não, sinceramente eu não sei pois não tenho tanto conhecimento em CSS, eu imaginava que a porcentagem neste caso serviria para ter o efeito responsivo. Commented 27/03/2017 às 17:29
  • De fato as porcentagens servem para manter a responsividade. Acabei de ver em tela toda (eu não tinha percebido que era possível, erro meu) e fiquei surpreso pelo fato de que o espaçamento diminui conforme o mapa de hexágonos aumenta. Commented 27/03/2017 às 17:36
  • Encontrei uma variação do código que você utiliza, que funciona sem maiores problemas. Veja a resposta marcada como aceita em: stackoverflow.com/questions/26114920/… Commented 27/03/2017 às 17:44

1 Resposta 1

2

Olá! Encontrei um exemplo e fiz algumas alterações. Acho que pode te dar alguma base.

.hex {
  float: left;
  margin-right: -26px;
  margin-bottom: -50px;
}

.hex .left {
  float: left;
  width: 0;
  border-right: 30px solid #6C6;
  border-top: 52px solid transparent;
  border-bottom: 52px solid transparent;
}

.hex .middle {
  float: left;
  width: 60px;
  height: 104px;
  background: #6C6;
}

.hex .right {
  float: left;
  width: 0;
  border-left: 30px solid #6C6;
  border-top: 52px solid transparent;
  border-bottom: 52px solid transparent;
}

.hex-row {
  clear: left;
}

.hex:nth-child(even) {
  margin-top: 53px;
}
<div class="hex-row">
  <div class="hex">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
  <div class="hex">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
  <div class="hex">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
</div>
<div class="hex-row">
  <div class="hex">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
  <div class="hex">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
  <div class="hex">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
</div>
<div class="hex-row">
  <div class="hex">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
  <div class="hex">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
  <div class="hex">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
</div>

1
  • 2
    Muito interessante e não resisti de deixar um comentário quanto a possibilidade de se utilizar várias figuras outras geométricas. Salvou minha vida, pois iria tentar via col-xx-99. Grato.
    – Di Lêu
    Commented 3/03/2018 às 18:03

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 .