Hexagons

Published on 2026-04-18 20:47

Web is based on rectangles and the whole field of graphic design follows the convention of rows and columns. So with the redesign, I decided to experiment a bit.

First let's start with a hexagon. HTML doesn't have a native one, so we'll have to create it with CSS. For that we can use the property clip-path and function polygon. In the following example is the single div element:

<div class="hexagon"></div>

:root {
  --hexagon-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.hexagon {
  clip-path: var(--hexagon-path);
  width: 5rem;
  height: 4.33rem;
  background: var(--dark-mid-purple);
}

Now that there's a single hexagon on the screen, let's add several more. To demonstrate how the hexagons with each other we need three of them.

<section>
  <div class="hex-1"><section><span>Text</span></section></div>
  <div class="hex-2"><section><span>Text</span></section></div>
  <div class="hex-3"><section><span>Text</span></section></div>
</section>

To place them on the screen we need to tweak the grid a bit. Customary, at least since the Bootstrap was released, the columns were of uniform width (every column had same width). If we want to use hexagons, we need to use alternating widths because all the hexagons with touch each other with sides that are neither horizontal nor vertical¹.

There's one more thing to discuss before going to the grid. And that's clip path which has some drawbacks. One of them is that using borders is not practical because they don't follow the clip-path property. So to simulate the border we need to add an inner hexagon with different background.

<section>
  <div class="hexagon"><section><span>Text</span></section></div>
</section>

Now that we have this explained and out of the way, let's look how the three hexagons fit together:

<section class="hexagon-wrapper">
  <div class="outer-hexagon hex-1">
	  <section class="inner-hexagon"><span>Text</span></section>
  </div>
  <div class="outer-hexagon hex-2">
	  <section class="inner-hexagon"><span>Text</span></section>
  </div>
  <div class="outer-hexagon hex-3">
	  <section class="inner-hexagon"><span>Text</span></section>
  </div>
</section>

:root {
  --hexagon-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  --outer-hexagon-padding: 1px;
  --hexagon-width: 10rem;
  --hexagon-height: 8.66rem
}
.hexagon-wrapper {
  display: grid;
  grid-template-columns: repeat(7, 2.5rem 5rem) 2.5rem;
  grid-template-rows: repeat(8, 4.33rem);
}
.outer-hexagon {
  clip-path: var(--hexagon-path);
  width: var(--hexagon-width);
  height: var(--hexagon-height);
  text-wrap: balance;
  font-size: 2rem;
  text-align: center;
  background: black;
  display: flex;
  padding: 1px;
  justify-content: center;
  align-items: center;
}
.inner-hexagon {
  background: white;
  clip-path: var(--hexagon-path);
  display: flex;
  align-items: center;
  width: calc(100% - (2 * var(--outer-hexagon-padding)));
  height: calc(100% - (2 * var(--outer-hexagon-padding)));
  text-align: center;
  justify-content: center;
}
.hex-1 {
  grid-row: 1 / 3;
  grid-column 1 / 4;
}
.hex-2 {
  grid-row: 3 / 5;
  grid-column 1 / 4;
}
.hex-3 {
  grid-row: 2 / 4;
  grid-column: 3 / 6;
}

Resources

• clip-path on MDN

Footnotes

1. I tried looking for the technical nameBack