Responsive hexagonal diagram

Question

Responsive hexagonal diagram

Navigation

#1 by (2 votes)

4

I found a code that assembles a set of hexagons (like a beehive) so that it is responsive. I made some adjustments to meet what I intend as a result, which is not exactly a grid. I simply added a class to hide the hex that I do not want and have a kind of diagram.

Anyway, the problem I'm having is that the space between each hexagon is varying according to the display area. For example, if I take the browser and change the size of the window, the larger the space between the elements, it will overlap.

I have tried to find other alternatives but most of them are with the hexagon with the triangular base.

Here's what I have:

* { 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>

html css layout-responsivo

asked by anonymous 27.03.2017 / 18:55

1 answer

Is there any risk in using "SET FOREIGN_KEY_CHECKS = 0"? Return the name of the month as select

score 2 · Accepted Answer

Hello! I found an example and made some changes. I think it can give you some basis.

.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>