How to make a HEXAGON in CSS

One of my latest DIY projects has been making geometric hanging planters out of brass tubing. I love geometric shapes, and when I was given my first project to design and code my personal website I wanted to incorporate those shapes into my design.

In geometry, a hexagon is a polygon with six equal sides. I’m not a mathematician by any means, so I had to make this a little more digestible for myself. Basically a hexagon is a rectangle in the middle with two triangles- one on the top, and one on the bottom.

Before you start styling things in CSS you should add default normalize, clearfix and border-box fixes so weird browser things don’t happen.

Grab the code here and toss it in the top of your CSS file.

To make a triangle

I started with making a div and gave it some dimension, and a border.

// HTML
<div class="box'></div>
//CSS
.box {
  width: 500px;
  height: 500px;
  border: 100px solid black;
}

Cool. So to show how these borders actually work, let’s change the colour of each side of the border.

.box {
  width: 500px;
  height: 500px;
  border-top: 200px solid palevioletred;
  border-right: 200px solid mediumturquoise;
  border-bottom: 200px solid goldenrod;
  border-left: 200px solid mediumpurple;
}

So that looks pretty neat I guess. The important thing to remember here is,
that borders are beveled. You can see how each side of the border connects with each other. Starting to see triangles yet?

If we take away the dimensions we gave our box, and change the borders pixel value and the main width and heigh value back to 300px. No dimensions on the box will take away the white part in the previous image. Leaving you with something like this.

Boom! Those all look like triangles to me! Each side of the border connects to the other, and give it’s neighbouring border a triangle shape.

So, lets add something else to our borders. TRANSPARENCY!
To show how this works, I’m going to focus on that yellow triangle. If we change the colour of the left and right borders to transparent, they’ll still be there, you just can’t see them. Thus, giving the yellow border it’s shape.

.box {
  width: 500px;
  height: 500px;
  border-top: 300px solid transparent;
  border-right: 300px solid transparent;
  border-bottom: 300px solid goldenrod;
  border-left: 300px solid transparent;
}

Making a hexagon

Neato. So knowing how a triangle is made, we’re going to need that for our hexagon. I’ve made a separate div for our hexagon. I’ll be using ::before and ::after pseudo elements to add them onto the rectangle.

To start off, let’s make our hexagon 500px. Now to find out the hexagon’s height we have to give math some love. Take the width of the hexagon, 500px and divide it by 1.73 to get the height, which equals 288.68.

So, this hurts my brain a little bit, I used 1.73 because it has something to do with the distance between each side of the hexagon, and then you multiply that by 2. Because hexagons have 6 sides that are equal we get 1.73. I read this in a how to make a quilt tutorial btw.

// HTML
<div class="hexagon"></div>
// CSS
.hexagon {
  position: relative;
  width: 500px;
  height: 288.68px;
  background: #CD5C5C;
  margin: 144px auto;
}

So without giving your rectangle some margin, your shape would just be hanging out on the side. And we need to give that rectangle some room to add the two triangle elements on the top and bottom. If you remember back to when we were making our triangles- transparency means that the borders are still there we just cannot see them. With that knowledge we’re going to need to give some space around the rectangle for our triangles to chill- I did that by adding margin.

I gave our hexagon a margin of 1.44px, because I took our height (288.68px) and divided that by two which equals 1.44px.

Next we’re going to select both ::before and ::after elements right now to
give them some style.
Before and After elements need some the content property to exist but we’re just going to leave them blank with a value of nothing.

Remembering back to our triangles, we’re going to play around with some of our border magic. Let’s make each side of the border 250px, because that’s half of the initial 500px we set our width to in the beginning. All sides equal, right?

.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  border-left: 250px solid transparent;
  border-right: 250px solid transparent;
}

To add the first triangle on top of our box, we need to tell it where it needs to go. We do that by calling out “bottom: 100%”. This means it’s going to go from the bottom left corner of our rectangle and go up 100% of the box to the top right. This is all possible because of the position properties we’ve applied to the parent container, and the before and after elements.

We set the left and right borders to be transparent which, gives us the sides of the triangles. If we don’t call out the top border it doesn’t exist, it just cuts it off the top, but if we don’t call out the left and right borders it will make the top of the triangle flat, which ain’t too hexagonal is it?

Now lets style our before element (the top triangle):

.hexagon::before {
  bottom: 100%;
  border-bottom: 144.34px solid #CD5C5C;
}

Alright cool, that looks like a pretty neat house. We’re almost there. Lets add the bottom. And we just basically do the same as before. Just flip all our info.

.hexagon::after {
  top: 100%;
  border-top: 144.34px solid #CD5C5C;
}

And there you have it, a hexagon completely made out of code!