Create CSS3 Hexagon

There are two easy way to make CSS3 Hexagon  and I am gonna show you the way in details that how to create css3 hexagon. In both case we will use ':after' and ':before'  Pseudo-classes. Actually my target is to use only one container in HTML to create a hexagon because  we need three elements. By using :after  and :before css3 Pseudo-classes, we will get other tow container. Well, let us see how to create Hexagon.

Pure CSS3 Hexagon Box
Pure CSS3 Hexagon Box

First way of CSS3 Hexagon.

Hexagon with 2 triangle and 1 rectangle
Hexagon with 2 triangle and 1 rectangle

First we will take a container, in my case,  a div tag as our HTML markup for Hexagon. Consider a  class hex1 for that. HTML markup is as follows.

<div class="hex1">
     Hex 1
</div>

Now we will set height and width on the div element. Some questions comes! will the height and width be same? If not, than what is the ration? Well, the ratio between width and height is  1.7320508075688772935274463415059  or 1.732 approximately.

i,e width : height = 1.732 : 1 or alternatively height : width = 1 : 1.732


For details about ration, have a look on CSS Hexagon Ratio of Height Width
Following are the CSS for the fist way. i,e 2 triangle and 1 rectangle.

.hex1{
    background-color: rgba(52,152,219,.5);
    text-align: center;
    line-height: 100px;
    height: 100px;
    width: 173.2px;
    margin: 60px 10px;
    position: relative;
    z-index: 1;
}

.hex1:after,
.hex1:before{
    border-left: 87.5px solid transparent;
    border-right: 87.5px solid transparent;
    content: "";
    position: absolute;
    left: 0;
    z-index: -1;
}

.hex1:before{
    border-top: 50px solid transparent;
    border-bottom: 50px solid rgba(52,152,219,.5);
    top: -100px;
}

.hex1:after{
    bottom: -100px;
    border-top: 50px solid rgba(52,152,219,.5);
    border-bottom: 50px solid transparent;
}

Let us discuss the above css code. On the very beginning, we have set the background-color, height, width,  z-index and the position as relative. We have set position relative on the hex1 class as we will set/place the after and before relative to the hex1 class.

And then we have added after and before. Actually we made two triangle with that after and before, one will set on the top part and the other will set to the bottom part of the main container of Hexagon.  The above code will generate a hexagon looks like as follow:

Hexagon style 1 with after and before
CSS Hexagon style 1

See the Demo

Second way of CSS3 Hexagon.

Hexagon with 3 Rectangle
Hexagon with 3 Rectangle

Same like the first one we will also take a div tag as the main container of hexagon as follows

<div class="hex2">
     Hex 2
</div>

We will build this with 3 rectangle using after and before . Actually we will rotate other 2 rectangle and fit them accordingly. See the following css code for the hexagon.

.hex2,
.hex2:before,
.hex2:after{
    border-style: solid;
    border-color: #1fcede;
    border-width: 1px;
    border-top: none;
    border-bottom: none;
    height: 100px;
    width: 173.2px;
}

.hex2{
    text-align: center;
    line-height: 100px;
    position:relative;
    z-index:0;
    margin: 60px 10px;
}

.hex2:after,
.hex2:before{
    content: "";
    position: absolute;
    top:0;
    left: -1px;
    z-index: -1;
}

.hex2:before{
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
            transform: rotate(60deg);
}

.hex2:after{
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}

.hex2:hover,
.hex2:hover:before,
.hex2:hover:after{
    background-color: #1fcede;
}

As you see the code, we have rotate after into -60degree and before into 60degree to create the hexagon.  The above code of hexagon will create a hexagon like follows and will change background on hover.


CSS Hexagon style 2 with border
CSS Hexagon style 2 with border

See the Demo


Video tutorial of making css3 hexagon tutorial

 


Hover Effects of CSS Hexagon with Border

 

I have also created a set of CSS3 Hexagon buttons with 4 different size. See CSS3 Hexagon Buttons   on github

7 thoughts on “Create CSS3 Hexagon”

  1. Thank you very much for sharing this beautiful information. I really needed this information a couple of months but sadly did not find this beautiful tutorial 🙁 I am a freelancer and failed to get the hexagon doing. After reading this article I am sure I'll not fail any project in future 🙂

    Juni

Leave a Reply

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

*