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 .

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.

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.

triangle to calculate width and height of hexagon

In the above triangle we set a point *D* that divide *BC* equally,

i.e *BD = CD* and we joint *AD*. Now *AD* divide the triangle *ABC* into 2 equal part.

i.e *triangle ABD* = *triangle ADC* and *angle ADB* = *angle ADC* = *90 degree*.

Now we will use trigonometrical formula to evaluate the ratio of* AB* (height ) and *BD* ( BC = 2* BD = width ). For a rectangular triangle (since angle ADB = anlge ADC = 90degree ), consider the triangle ABD, we can write

BD = AB* cosB* = AB *cos 30 degree —————- (a)*

Now *cos30degree* = 0.86602540378443864676372317075294 and consider AB = 1, putting this value in equation (a) we get

BD = 1 * 0.86602540378443864676372317075294 = 0.86602540378443864676372317075294

Now BC = 2 * BD = 2* 0.86602540378443864676372317075294 = 1.7320508075688772935274463415059 which is approximately 1.732

Therefor the ratio of AB and BC is 1: 1.732 , i,e the CSS Hexagon Ratio of Height and Width is height:width = 1 : 1.732 or alternatively ratio of width and height is width:height = 1.732 : 1

Now you know what is the ratio of height and width of hexagon and it’s time to Create CSS3 Hexagon