Geek asks and answers

How to draw a perfect hexagon with three divs?

Place the div in the center of the viewport with position:absoluteand top:50%; left:50%; transform: translate(-50%, -50%).

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

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

but the result seems to be that there are some fuzzy pixels at the border crossing point. I do not know how to fix this.

browser: chrome Editor: bracket

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

+3
source share
3 answers

Borders can distort shapes in your violin.

Check out this script: http://jsfiddle.net/zqS3Q/ and replace this code to see a solid hexagon without 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);
    }

, : enter image description here

+3

- , , , , .

0

It seems to work if instead of 60degin horizontal:afteryou put -120deg. This seems like a rounding error.

http://jsfiddle.net/m3Xx8/

0
source

More articles:


All Articles