CSS transparent für die übergeordnete Farbe

Question

Also, hier ist JSFIDDLE.

Hier sehen Sie header mit background Farbverlauf:

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

Ich habe span mit :before CSS-Attribut, das auch dahinter die Hintergrundfarbe nachahmt.

Der Zweck davon ist, eine "Schnitt" -Funktion als Teil des Wortes "THIS" zu bekommen. Sie werden bemerken, dass ein oberer linker Teil von "T" fehlt oder eher wie hinter dem :before Attribut versteckt ist.

Das Problem ich habe, ist, dass, da die Hintergrundfarbe ist linear-gradient, wenn die Bildschirmbreite ändert, werden so die linearen Gradienten

Diese Änderung (Sie, indem Sie das Browserfenster kleiner sehen) in Der Farbverlauf spiegelt nicht das Attribut :before wider und stimmt nicht mehr mit der Hintergrundfarbe überein.

Gibt es eine Möglichkeit, dies zu beheben, während der lineare Verlauf des Hintergrunds beibehalten wird?

Answer 1

Nicht sicher, ob dies eine Option für Ihren Anwendungsfall ist, aber Sie könnten den linearen Farbverlauf so einstellen, dass die Farbänderung erst nach dem Löschen des Ausschnitts erfolgt.

Sie würden den ersten Anschlag im Farbverlauf auf die Breite des Padding (118px) plus die Breite des Cliprahmens (21px) festlegen und dann die Cliprahmenfarben so ändern, dass sie mit der Anfangsfarbe des Clips übereinstimmen Gradient. Im folgenden Beispiel habe ich auf 140px aufgerundet.

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; 
}