Linearer Farbverlauf erzeugt gezackte Kanten im Hintergrundbild: So glätten Sie die Linie

Um eine spitze Unterkante auf einem Bild zu erzeugen , kann man sich dafür entscheiden, zwei reaktionsfähige Dreiecke an der Basis zu erzeugen. Allerdings kann es sich als Herausforderung erweisen, bei einem solchen Design eine glatte Linie zu erreichen. Wie in der ursprünglichen Frage erwähnt, weist der für diesen Zweck verwendete lineare Farbverlauf aufgrund seines „harten Stoppverhaltens“ tendenziell gezackte Kanten auf.

Die Lösung liegt in der Änderung der Farbübergänge innerhalb des Farbverlaufs. Indem man den Startpunkt der zweiten Farbe leicht vom Endpunkt der ersten weg verschiebt, kann man einen subtilen Unschärfeeffekt erzielen. Dies mildert den scharfen Farbübergang und führt zu einer glatteren Linie.

Beziehen Sie sich auf den Originalcode und ändern Sie die Eigenschaft „linear-gradient“ wie folgt:

.lefttriangle {
  ...
  background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%);
}

.righttriangle {
  ...
  background: linear-gradient(to left top, #ffffff 48%, transparent 50%);
}

Durch Anpassen der Stopp- und Startpunkte wie gezeigt wird der Farbübergang weniger abrupt, wodurch die Glätte der Linie an der Basis des Dreiecks verbessert wird. Es ist erwähnenswert, dass diese Auflösung mit den meisten modernen Browsern kompatibel ist, ohne die Reaktionsfähigkeit zu beeinträchtigen.