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