缩放会导致CSS形状之间出现间隙

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

这个问题在Firefox上的任何刻度值上都是最明显的。如果缩放为非整数值，它也会出现在Chrome中。Firefox在

：before

和

：after

伪元素中还显示了令人费解的水平线，尽管这些线位于边框的中心，而不是任何形状的边缘

片段 下面是我的标记和样式的简化版本，也在上

HTML:

截图（LinuxMint） 铬：在x2处缩放（整数值处无明显间隙）

Firefox：在x2处缩放（间隙，加上水平线）

有人帮忙吗？

---

我的猜测是，这些线条的出现是因为一些数字舍入，但我真的没有想法。有可能解决这个问题吗？是否有其他方法可用于此缩放？提前感谢您的回复。

这似乎是一个缩放错误，因为当项目通过其他方式（如旋转）转换时，间隙似乎保持不变

最好的解决方法是将元素添加到.hex类而不是.scale类，然后重新定位。我希望这有助于引导您找到更好的解决方案

---

祝你好运

我更喜欢使用顶部/底部方法创建六边形，因为它们非常简单。退房

只要修正实际测量值，我使用的方法就能解决你的问题

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

---

如果您使用em维度，您可以通过设置字体大小来获得缩放效果（可能比使用transform更好？）。我刚才使用transform来说明该方法可以使用transform，类似于OP使用transform的方式。不过，这是一个很好的观点。@TalkativeTree:谢谢你的建议——我想我会尝试这种方法。缩放时仍有一些可见线。还有…@vals:现在这是个好主意。反正我已经在用ems测量了。我认为把你的两个建议结合起来是我最好的解决办法。干杯。谢谢你的建议，尽管六角的位置有点复杂（有很多…），但这对我来说不是最好的解决方案。谢谢你的调查，我很感激！欢迎：）另一个回答看起来非常有用！非常感谢。

.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%;
    }
}

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