CSSの背景色でボックスの上に対角線を作成します

Question

下の例に示すように、背景色が緑色のボックスの上に対角線を作成したいとします。どのCSSを使ってこれを行うべきですか？

Diagonal line on top of green background color

私はこのコードでそれを行うために管理：

.quote { 
    background: #41ade5; 
    color: #fff; 
    position: relative; 
    z-index: 1; 
} 
.quote:before { 
    background: inherit; 
    bottom: 0 !important; 
    content: '' !important; 
    display: block !important; 
    height: 50% !important; 
    left: 0 !important; 
    position: absolute !important; 
    right: 0 !important; 
    transform: skewY(1.5deg) !important; 
    transform-origin: 100% 0 !important; 
    z-index: -1 !important; 
    top: 0; 
}` 

しかし、その後、対角線は、多くのエッジ、および鋭くないを得ました。下の画像に示されている：

Diagonal line with edges

は、誰もがよりクリーンで対角線を作るための任意の良いCSSのヒントを持っていますか？

Answer 1

<div style="width: 300px; height: 300px; border: solid 1px black; position: relative; overflow: hidden;"> 
 
    <div style="width: 400px; height: 100px; background: green; margin-bottom: 200px; transform: rotate(174deg); position: absolute; left: -77px; top: -15px; "> 
 

 
    </div> 
 
</div>

あなたはこのことですか？

Answer 2

これはあなたのためにもっとよく見えますか？私はちょっとジャギーを減らすのに役立つことが知られている-webkit-backface-visibility: hidden;を追加しました。しかし、私はアンチエイリアスが適用されていない場合にのみ解決策があると思います。これは、ブラウザのアンチエイリアスと同じくらい良い場合があります。あなたが画像を描画した場合

body { 
 
background:#000; 
 
} 
 
.quote { 
 
    background: #41ade5; 
 
    color: #fff; 
 
    position: relative; 
 
    z-index: 1; 
 
    height:100px; 
 
    margin-top:50px; 
 
} 
 
.quote:before { 
 
    background: inherit; 
 
    bottom: 0; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    transform: rotate(1.5deg); 
 
    transform-origin: 100% 0; 
 
    z-index: -1; 
 
    top: 0; 
 
    -webkit-backface-visibility: hidden; 
 
}

<div class="quote"></div>

Answer 3

それはエッジとアンシャープがかかりますが、CSSにはありません。

以下はあなたのCSSコードです。正常に動作しています。

.quote { 
 
    background: #41ade5; 
 
    color: #fff; 
 
    position: relative; 
 
    z-index: 1; 
 
    width: 300px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 

 
.quote:before { 
 
    background: black; 
 
    bottom: 0 !important; 
 
    content: '' !important; 
 
    display: block !important; 
 
    height: 50% !important; 
 
    left: 0 !important; 
 
    position: absolute !important; 
 
    right: 0 !important; 
 
    transform: skewY(1.5deg) !important; 
 
    transform-origin: 100% 0 !important; 
 
    z-index: -1 !important; 
 
    top: 0; 
 
}

<div class="quote"></div>