How to draw a perfect hexagon with three divs?

Question

Putting a div to the center of the viewport with position:absolute and top:50%; left:50%; transform: translate(-50%, -50%).

and using before and after elements with rotate(60deg) and rotate(-60deg).

setting the divs box-sizing: border-box; border:1px solid blue; height:40px; and 20*2*3^(1/2) seems to be 69.28xxxxxxx, so I set the width as that.

but the result seems there are some unperfect pixels at the border crossing point. I don't know how to fix it.

browser: chrome editor:bracket

http://jsfiddle.net/gonejack/hYN67/

Answer 1

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:

Answer 2

It seems to work if rather than 60deg in horizontal:after you put in -120deg. It looks like a rounding error.

http://jsfiddle.net/m3Xx8/

Answer 3

It seems like a chrome console bug, the console turn on then the shape would became weird, when the console high enough to give the viewport a scrollbar.