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. Continue reading Create CSS3 Hexagon

CSS Hexagon Ratio of Height Width

A hexagon is a polygon with 6 edges and 6 vertex.  Following is a example of hexagon taken from Wikipedia and there you will get more details about hexagon geometrically .

Hexagon
Hexagon

But we are here find the ratio of height and width to create hexagon in web designing. Well, there are two easy way to create hexagon as following images. First is with 2 triangle and 1 rectangle and second one is with 3 rectangle.

2 way to create css3 Hexagon
Two way to create css3 Hexagon

In both case we need rectangle and the question is that what will be the ratio of width and height of the rectangle? Well, we are here to calculate this. We will take a triangle from the hexagon for our calculation. Continue reading CSS Hexagon Ratio of Height Width