透明で隣接した歪んだブロック間の奇妙な細い線

Question

半透明ブロックに問題があります。主な問題は、「ブロック」要素とその擬似要素（前）との間の細い線である。この問題は、現代のデスクトップブラウザ（Opera、Firefox、Chromeなど）すべてに表示されますが、Safariについてはわかりません。以下 コード：

HTML：

<div class="block"></div> 

CSS：jsfiddleに

.block{ 
    position: relative; 
    width: 200px; 
    height: 200px; 
    margin-left: 100px; 
    background-color: rgba(0, 0, 0, 0.5); 
    transform: skewX(-21deg); 
} 
.block:before{ 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 100%; 
    width: 100px; 
    height:200px; 
    background-color: rgba(0, 0, 0, 0.5); 
} 

例： https://jsfiddle.net/Farmatique/xw877edw/

私は1に背景色の不透明度を設定しても、この問題はまだ残っています。

ありがとうございました。

Answer 1

アンさらに良い解決策...

あなたに実行している問題は、互いの隣に座って歪んだ要素のanti-aliasedエッジによるものです。ブラウザは、ピクセルで滑らかで角度のあるエッジを描画するために最善を尽くしており、指定した背景色のさまざまな、より明るい、より透明な色合いを使用して、滑らかなエッジの錯覚を与えます。あなたが見ている "ライン"は、より明るく透明なピクセルで、ドキュメントの下の白い背景が輝きます。

代わりの:before擬似要素のbackground-colorを割り当て、このように、.blockクラスにright-borderを割り当てる：

.block{ 
     position: relative; 
     width: 200px; 
     height: 200px; 
     margin-left: 100px; 
     background-color: rgba(0, 0, 0, 0.5); 
     transform: skewX(-21deg); 
     border-right-width: 100px; 
     border-right-style: solid; 
     border-right-color: transparent; 
    } 

    .block:before{ 
     content: 'I\'m in the pseudo element'; 
     display: block; 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 100%; 
     width: 100px; 
     height:200px; 
    } 

境界が.blockdiv要素の一部であるため、との間の隙間は、もはや存在しあなたの背景色を持っているかのように、擬似要素が境界領域の上に表示されます。

これ以上の行はありません。

Answer 2

問題が発生しているのは、歪んだ要素の端にあるanti-aliasedです。ブラウザは、ピクセルで滑らかで角度のあるエッジを描画するために最善を尽くしており、指定した背景色のさまざまな、より明るい、より透明な色合いを使用して、滑らかなエッジの錯覚を与えます。あなたが見ている "ライン"は、より明るく透明なピクセルで、ドキュメントの下の白い背景が輝きます。

CSSのアプローチからは、アンチエイリアスエッジトーンダウンし:beforeに微妙なbox-shadowプロパティを持つユーザーの目を欺くしようとすることができますかどうかを確認するために不透明度を調整し、必要に応じて

box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); 

をあなたは働くスイートスポットを見つけることができます。

もう一つのアイデアは、歪んだ要素の背後にある背景として、白以外の色を試してみることです。

しかし、ここで注意しなければならないのは、すべてのデバイスが背景と影のために選択された色の独自の表現を持つことであり、一部では目立ちやすく、他のものではそれほど目立たないということです。