Wie erstelle ich mithilfe linearer Farbverläufe sanft umrandete, spitze Enden für ein Hintergrundbild?

Anpassen des linearen Farbverlaufs für sanft umrandete Hintergrundbilder mit spitzen Enden

Problem:

Erstellen einer spitzen Unterkante für ein Bild Bei zwei reagierenden Dreiecken mit linearem Farbverlauf entsteht eine gezackte Kante.

Lösung:

Um die gezackte Kante zu beseitigen, vermeiden Sie ein abruptes Stoppen der Farben im Bild mit linearem Farbverlauf . Stattdessen ändern Sie die Stopppunkte, um einen subtilen Unschärfeeffekt zu erzeugen:

<code class="css">.lefttriangle {
  ...
  background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%);
}
.righttriangle {
  ...
  background: linear-gradient(to left top, #ffffff 48%, transparent 50%);
}</code>

Diese Anpassung verschiebt den Anfang der zweiten Farbe leicht vom Ende der ersten Farbe weg, was zu einem führt sanfterer Übergang.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mithilfe linearer Farbverläufe sanft umrandete, spitze Enden für ein Hintergrundbild?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!