Draw Hexagon with CSS

Using CSS to draw a hexagon requires three containers to draw the three parts of the hexagon, as shown in:

Next, there's the code:

Css:

<style>
#box1{width:0;Border-left:52px Solid Transparent;Border-right:52px Solid Transparent;Border-bottom:30px Solid #6c6;    }
#box2{width:104px;Height:60px;Background-color:#6c6;}
#box3{width:0;Border-top:30px Solid #6c6;Border-left:52px Solid Transparent;Border-right:52px Solid Transparent;}
<DivID= "Box1"></Div>
<DivID= "Box2"></Div><DivID= "Box3"></Div>

</ style >

If you make the following shape, you can rotate the above or float it:

Code:

#box4 {width:0;border-right:30px solid #6c6; border-top:52px solid transparent;border-bottom:52px solid transparent; Float:left;}
#box5 {width:60px;height:104px;background-color: #6c6; float:left;}
#box6 {width:0;border-left:30px solid #6c6; border-top:52px solid transparent;border-bottom:52px solid transparent; Float:left;}

<DivID= "Box4"></Div>
<DivID= "Box5"></Div>
<DivID= "Box6"></Div>

Draw Hexagon with CSS