缩放导致CSS形状之间的间隙

我有一系列CSS六边形.我想对不同的视口宽度应用CSS缩放变换,尽管在我的六边形形状中出现间隙.

这个问题在任何规模值的Firefox上都是最明显的.如果缩放到非整数值,它也会出现在Chrome中. Firefox另外在：before和：after伪元素中显示令人困惑的水平线,尽管这些线位于边框的中心而不是任何形状的边缘.

片段

我的标记和样式的简化版本如下,也是JS Fiddle.

HTML：

样式：

.scale {
    margin: 8em auto;
    text-align: center;
    -webkit-transform:scale(2.5,2.5);
   -moz-transform:scale(2.5,2.5);
    -ms-transform:scale(2.5,2.5);
     -o-transform:scale(2.5,2.5);
        transform:scale(2.5,2.5);
}
.hex {
    position: relative;
    display: inline-block;
    margin: 0 30px;
    width: 60px;
    height: 104px;
    background-color: #000;
    &:before,&:after {
        position: absolute;
        width: 0;
        border: 1px solid transparent;
        border-width: (52px) (30px);
        content: "";
    }
    &:before {
        border-right-color: #000;
        right: 100%;
    }
    &:after {
        border-left-color: #000;
        left: 100%;
    }
}

截图(Linux Mint)

Chrome：缩放为x2(整数值无明显差距)

Firefox：缩放为x2(间隙,加上水平线)

有帮助吗？

我的猜测是这些线条因为一些数字四舍五入而出现,但我真的没有想法.有可能解决这个问题吗？我可以使用另一种方法进行缩放吗？提前感谢您的回复.

最佳答案

我更喜欢使用创建六边形的顶部/底部方法,因为它们非常简单.查看the one I threw in your jsfiddle.

只需修正实际测量值,我使用的方法就可以解决您的问题.

    .hexagon{
        margin-left: 8em;
        height: 4em;
        width: 4em;
        -webkit-transform:scale(2.5,2.5);
       -moz-transform:scale(2.5,2.5);
        -ms-transform:scale(2.5,2.5);
         -o-transform:scale(2.5,2.5);
            transform:scale(2.5,2.5);
        position: relative;
    }
    .top{
        top: 2em;
        border-bottom: 2em solid black;
        border-left: 1em solid transparent;
        border-right: 1em solid transparent;
    }
    .bottom{
        top: 4em;
        border-top: 2em solid black;
        border-left: 1em solid transparent;
        border-right: 1em solid transparent;
    }