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

Question

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

并使用旋转rotate(60deg)和rotate(-60deg)的before和after元素。

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

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

浏览器：chrome 编辑器：bracket

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

- igonejack

---

你能展示一下那段代码吗？ - Shomz

前往http://jsfiddle.net/并尝试重新创建您的问题，然后保存并提供链接。 - Shomz

你可以从 http://css-tricks.com/snippets/css/hexagon-with-shadow/ 获取一些提示。 - Ankur Aggarwal

在FF中无法工作（FF已经过时了）。在Chrome中它很丑（Chrome很丑）。它在Safari中可以工作（Go ！）。 - bjb568

尽量不要使用浮点数来表示像素尺寸。 - Shomz

尝试了那个，但还是一样。 - igonejack

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

此外，旋转的方框不一定会成为精确指定的像素尺寸：

- mgamba

Answer 2

看起来像是 Chrome 控制台的 Bug，当控制台高度足够使视口出现滚动条时，控制台会变得奇怪。

- igonejack

Answer 3

如果在horizontal:after中，您将60deg替换为-120deg，它似乎可以工作。看起来像是一个舍入误差。

http://jsfiddle.net/m3Xx8/

- Ed L

---

那个小提琴仍然显示的是 60度 而不是你指定的 -120度。只是让你知道一下。 - Richard Shi