如何用三个div绘制一个完美的六边形？

Question

使用position:absolute和top:50%; left:50%; transform: translate(-50%, -50%)将div放到视口的中心。

使用rotate(60deg)和rotate(-60deg)之前和之后的元素。

设置div box-sizing: border-box; border:1px solid blue; height:40px;和20*2*3^(1/2)似乎是69.28xxxxxxx，所以我将宽度设置为{{1}}。

但结果似乎在边界交叉点处存在一些不完美的像素。我不知道如何解决它。

浏览器：chrome 编辑：支架

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

Answer 1

边框可能会扭曲你小提琴的形状。

查看这个小提琴：http://jsfiddle.net/zqS3Q/并替换为此代码，以查看没有边框的实心六边形：

   #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);
    }

此外，旋转的框不一定是指定的像素尺寸：

Answer 2

这似乎是一个chrome控制台错误，控制台打开然后当控制台足够高以给视口一个滚动条时，形状会变得怪异。

Answer 3

如果60deg horizontal:after放入-120deg，似乎有效。它看起来像一个舍入误差。

http://jsfiddle.net/m3Xx8/