親色に透明なCSS

Question

だから、JSFIDDLEです。ここで

、あなたはbackground色のグラデーションでheaderを参照してください。

background: linear-gradient(to right, #827099 0%, #dc5562 100%) 

また、私はその背後に背景色を模倣:before CSS属性でspanを持っています。

この目的は、「この」という単語の一部として「カット」機能を得ることです。 「T」の左上部分がなくなっているか、:before属性の後ろに隠れているように見えます。

私が午前の問題は、背景色がlinear-gradient、画面幅の変更は、その線形勾配が

この変化を（あなたがブラウザのウィンドウを小さくすることによって見ることができる）んであるため、グラデーションは:before属性に反映されず、背景色と一致しなくなります。

バックグラウンドの線形勾配を維持しながらこれを修正する方法はありますか？

Answer 1

これがユースケースのオプションであるかどうかはわかりませんが、リニアグラデーションを設定して、切り抜きをクリアするまで色の変化が起きないようにすることができます。

グラデーションの最初のストップを、パディングの幅（118px）にクリップボーダーの幅（21px）を加えたものに設定し、クリップの境界線の色を、勾配。以下の例では、140ピクセルに切り上げました。

https://jsfiddle.net/6dvy7dks/

.head { 
    background: linear-gradient(to right, #827099 140px, #dc5562 100%); 
} 

span.first:before { 
    border-top-color: #827099; 
    border-left-color: #827099; 
}