The borders might be distorting the shapes in your fiddle.
Check out this fiddle: http://jsfiddle.net/zqS3Q/ and replace with this code to see a solid hexagon with no borders:
#container {
position: relative;
border: 1px solid red;
margin-top: 10%;
min-height: 200px;
}
#horizontal {
position: absolute;
box-sizing: border-box;
top: 50%;
left: 50%;
height: 39px;
width: 66px;
background-color: blue;
}
#horizontal:before {
content: "";
position: absolute;
box-sizing: border-box;
height: 39px;
width: 66px;
background-color: blue;
-webkit-transform: rotate(240deg);
}
#horizontal:after {
content: "";
position: absolute;
box-sizing: border-box;
height: 39px;
width: 66px;
background-color: blue;
-webkit-transform: rotate(120deg);
}
Also, rotated boxes aren't necessarily going to be the exact specified pixel dimensions: