5

私は一連のCSS六角形を持っています。六角形内にギャップが表示されますが、異なるビューポート幅に CSS スケール変換を適用したいと思います。

この問題は、どのスケール値でも Firefox で最も顕著です。整数以外の値にスケーリングすると、Chrome でも表示されます。Firefox はさらに、:beforeおよび: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 でスケーリング (整数値で明らかなギャップなし) 変換スケールを使用したクロム(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

アイテムが回転などの他の手段で変換されたときにギャップが残るように見えるため、スケーリングのバグのようです。

これを回避できる最善の方法は、要素を .scale クラスではなく .hex クラスに追加し、再配置することです。これがより良い解決策につながることを願っています。

幸運を！

于 2014-02-17T02:15:56.123 に答える