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. triangle to calculate width and height of hexagon


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

 

 

Leave a Reply

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

*