Lösen des Problems von gezackten Linien in Verläufen

Eines der gängigen Designmuster, auf das Sie wahrscheinlich gestoßen sind, sind Blöcke mit einem eckigen Übergang von Verlaufsfarben. Es sieht ungefähr so ​​aus wie das Bild unten.


Winkelverlauf im Rechteck

Ich bin darauf gestoßen, als ich an einem unserer Projekte gearbeitet habe. Anstatt einen solchen Effekt mit einem Bild oder einer SVG-Datei zu implementieren, haben wir uns für einen linearen Verlauf entschieden, dessen Vorteil darin bestand, dass die Änderung des Neigungswinkels, der Verlaufsfarben usw. einfach genug war. direkt in CSS.


Abbildung 2: gezackte Kanten des Winkelverlaufs

Das Ergebnis sah wie in Abbildung 2 aus. Wie Sie sehen, traten am Rand des Übergangs der Verlaufsfarben deutlich hervorstehende Kerben auf.

Glücklicherweise gibt es eine sehr einfache Möglichkeit, dieses Problem zu lösen! Wenn Sie in einem linearen Farbverlauf eine Linie mit abrupten Farbänderungen erstellen möchten, schreiben Sie den Code in der Regel wie folgt:

background: linear-gradient(176deg, white, white 75%, black 75%, black 100%); 

Dies bedeutet, dass im Bereich von 0 bis 75% der Blockgröße die Füllfarbe weiß ist und mit 75% beginnt - schwarz. Dies erzeugt eine ziemlich gezackte Linie. Leider kann bei einem bestimmten Neigungswinkel und einer bestimmten Blockgröße ein ziemlich hässlicher Zickzack entstehen.

Die Korrektur erfordert sehr kleine Änderungen - fügen Sie den Dezimalteil zum zweiten Prozentsatz hinzu, was zu einer leichten Unschärfe an der Farbübergangslinie führt. Abhängig von Ihrer spezifischen Situation kann es erforderlich sein, den erforderlichen Wert auszuwählen, damit die Unschärfe nicht sehr auffällt, sondern sie visuell glättet.

 background: linear-gradient(176deg, white, white 75%, black 75.3%, black 100%); 

Vergleich von gezackten und glatten Verlaufslinien

CodePen Beispiel:


Ich hoffe, dies wird Ihnen in Zukunft bei der Lösung der Probleme helfen.

Danke amakhrov für die Idee mit "calc"
Meiner Meinung nach ist es mit calc () zuverlässiger: unabhängig von der Größe und dem Neigungswinkel

 linear-gradient(176deg, #A663CC, #A663CC 75%, #6F2DBD calc(75% + 1px))