Who said that hexagons with borders were hard in web dev

Hia folks, so for today I’ll be looking into making some hexagons with borders created with only CSS, HTML and a bit of jquery.

In the old days, we had to use images to get some decent looking shapes. Which also lead to static and hard to update designs.

Now we can have this :

Final version of infinate hexagons with borders

Now there is a few hexagon tutorials out there but most of them have solid hexagons which are hell to get borders on and even worse to add text to. So this is the idea

The hexagon shape and how to add borders

  1. We take a rectangle with some special dimentions :

Rectangle

2) we duplicate it 2 times and add a rotation of -60° and 60°

3 rectangles

3) We have a hexagon. And more important, we have the left and right borders of each of our rectangles making up the hex. This enables us to add a bit of CSS to color the borders and add any width we want.

rectangles to hexagons with borders

The HTML and CSS Code

So, to keep things clean, we will create a Wrapper with a set size and then some some inner divs to calculate our dimentions :

To keep things managable, I also added a page container to take care of the top of the screen and a row container for the diffrent rows :

We also need some CSS FOO to take care of all of it .

To create our 2 other rectangles, we will use the CSS property “before” and “after”. This makes things a bit more fiddly with objects being displayed one over the other but makes the html code much more readable. and the layers are nothing that a bit of manual z-indexing can’t fix.

and we get this :

our first hexagon with borders

the best part is that we can change the size in the wrapper. Then all is left to do is a bit of placement with the row padding-top.

Hexagons with borders inside hexagons with borders :

We can also use the same idea to add some inner hexes and some text:

hexagon with double borders

Adding some text

The text is in the wrapper div so it will follow the layout nicely. We just need to position it properly depending on the size of the hexes. If you look on the inspector, the wrapper is aligned with the 1st rectangle so we just play around to get the width, height and padding of the textbox to the right size :

Hexwrapper code  text positionning

Just chuck in a flexbox to get the centering sorted and we have hexagons with borders we can duplicate to our heat’s content.

3 hexagons with borders

 

 

 

 

One thought on “Who said that hexagons with borders were hard in web dev

Leave a Reply

Your email address will not be published. Required fields are marked *