5

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

这个问题在 Firefox 上以任何比例值都最为明显。如果缩放为非整数值，它也会出现在 Chrome 中。:beforeFirefox 还在和伪元素中显示了令人费解的水平线:after，尽管这些线位于边框的中心，而不是任何形状的边缘。

片段

下面是我的标记和样式的简化版本，也在JS Fiddle上。

HTML：

<div class="scale">
    <div class="hex"></div>
</div>

款式：

.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 缩放（在整数值处没有明显的间隙） 带变换比例的 Chrome(2)

Firefox：以 x2 缩放（间隙，加上水平线） 具有变换比例的 Firefox(2)

有帮助吗？

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

4

2 回答 2

3

我更喜欢使用顶部/底部方法来创建六边形，因为它们非常简单。看看我扔进你的 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;
    }
于 2014-02-17T02:52:23.590 回答
1

这似乎是一个缩放错误，因为当通过其他方式（例如旋转）转换项目时，间隙似乎仍然存在。

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

祝你好运！

于 2014-02-17T02:15:56.123 回答