我有一系列 CSS 六边形。我想对不同的视口宽度应用 CSS 缩放变换,尽管我的六边形形状中出现了间隙。
这个问题在任何比例值的 Firefox 上都最为明显。如果缩放为非整数值,它也会出现在 Chrome 中。 Firefox 还显示了令人困惑的水平线:before
and :after
伪元素,尽管这些线位于边框的中心而不是任何形状的边缘。
Snippets
我的标记和样式的简化版本如下,也在JSFiddle http://jsfiddle.net/chicgeek/pLfQU/3/.
HTML:
<div class="scale">
<div class="hex"></div>
</div>
Styles:
.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: scaled at x2 (no gaps evident at integer values)
Firefox: scaled at x2 (gaps, plus horizontal lines)
有帮助吗?
我的猜测是,这些线条的出现是因为一些数字舍入,但我真的没有想法。有可能解决这个问题吗?我可以使用另一种方法来进行这种缩放吗?预先感谢您的任何回复。