我有一系列CSS六边形.我想对不同的视口宽度应用CSS缩放变换,尽管在我的六边形形状中出现间隙.
这个问题在任何规模值的Firefox上都是最明显的.如果缩放到非整数值,它也会出现在Chrome中. Firefox另外在：before和：after伪元素中显示令人困惑的水平线,尽管这些线位于边框的中心而不是任何形状的边缘.
片段
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;
}
