缩放会导致CSS形状之间出现间隙 [英] Scaling results in gaps between CSS shapes

问题描述

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

在任何规模的Firefox上，此问题最明显.如果缩放到非整数值，它也会显示在Chrome中.Firefox还在:before 和:after 伪元素中显示了令人困惑的水平线，尽管这些线位于边框的中心而不是任何形状的边缘./p>

摘要

下面是我的标记和样式的简化版本，也位于.

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

  .hexagon {左边距:8em;高度:4em；宽度: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);转换:scale(2.5，2.5);职位:相对}.最佳{最高:2em；边框底部:2em纯黑色；左边框:1em纯透明；右边框:1em纯透明；}.底部{顶部:4em；边框顶部:2em纯黑色;左边框:1em纯透明；右边框:1em纯透明；} 

I have a series of CSS hexagons. I would like to apply CSS scale transform for different viewport widths, though gaps are appearing within my hexagon shapes.

This problem is most evident on Firefox at any scale value. It also appears in Chrome if scaled to non-integer values. Firefox additionally shows baffling horizontal lines in the :before and :after pseudo elements, though these lines are in the centre of a border and not at the edge of any shape.

Snippets

A simplified version of my markup and styles is below, and also on JS Fiddle.

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

Screenshots (Linux Mint)

Chrome: scaled at x2 (no gaps evident at integer values)

Firefox: scaled at x2 (gaps, plus horizontal lines)

Is there help?

My guess is that these lines are appearing because of some numerical rounding, but I really am out of ideas. Is it possible to fix this? Is there another approach I could use for this scaling? Thanks in advance for any responses.

解决方案

I am a bigger fan of using top/bottom methods of creating hexagons, because they're just very simple. Check out the one I threw in your jsfiddle.

Just fix up the actual measurements and the method I used should get rid of your problem.

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

这篇关于缩放会导致CSS形状之间出现间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！