2016-12-15 5 views
0

私は:beforeと:after擬似要素を使ってコンテナを作成しています。:コンテナ上の擬似要素の前に白い境界線があります

これらの疑似要素には白い下の境界線があるように見えますが、説明できません。

enter image description here

コードは以下の通りである:

#sobre:before { 
    position: absolute; 
    display: block; 

    width: 100%; 
    height: 6em; 

    background: inherit; 

    content: ''; 

    transform: skewY(-2deg); 
    -webkit-transform: skewY(-2deg); 
    -moz-transform: skewY(-2deg); 
    -ms-transform: skewY(-2deg); 

    transform-origin: -100%; 
    -webkit-transform-origin: -100%; 
    -moz-transform-origin: -100%; 
    -ms-transform-origin: -100%; 
} 

のコード:1、それが重なる場合:後だけ異なる変換原点とz屈折率と同じです次の容器。

+1

問題を示す[mcve]を投稿できますか? –

+1

可能性はありますか:afterと:beforeはcssのどこかで定義されていますか? #sobreにborder:noneを追加してみてください。 – Kantoci

+0

の前に、アンチエイリアスまたはサブピクセルレンダリングの可能性があります。 –

答えて

1

これは、CSS変換によるChromeの一般的なアンチエイリアスの問題です.と:before要素に-webkit-backface-visibility: hidden;を追加します。

+0

あなたがいくつかの権威のある情報源を含んでいたなら、この答えははるかに素晴らしいでしょう。 –

関連する問題