Résolution du problème des lignes irrégulières dans les gradients

L'un des modèles de conception les plus courants que vous avez probablement rencontrés est celui des blocs avec une transition angulaire de couleurs dégradées. Cela ressemble à l'image ci-dessous.


Dégradé angulaire à l'intérieur du rectangle

Je suis tombé sur cela en travaillant sur l'un de nos projets et au lieu d'implémenter un tel effet en utilisant une image ou un SVG, nous avons décidé d'utiliser un dégradé linéaire, dont l'avantage était qu'il était assez facile de changer l'angle d'inclinaison, les couleurs du dégradé, etc. directement en CSS.


Figure 2: bords dentelés du gradient angulaire

Le résultat ressemblait à celui illustré à la figure 2. Comme vous pouvez le voir, des encoches saillantes assez saillantes sont apparues à la frontière de la transition des couleurs dégradées.

Heureusement, il existe un moyen très simple de résoudre ce problème! Habituellement, lorsque vous souhaitez créer une ligne de changement de couleur brutal dans un dégradé linéaire, écrivez le code quelque chose comme ceci:

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

Cela signifie que dans la plage de 0 à 75% de la taille du bloc, la couleur de remplissage sera blanche et en commençant par 75% - noir. Cela crée une ligne plutôt irrégulière. Malheureusement, avec un certain angle de gradient et une certaine taille de bloc, un zigzag plutôt laid peut en résulter.

La correction de cela nécessite de très petits changements - ajoutez la partie décimale au deuxième pourcentage, ce qui créera un léger flou sur la ligne de transition de couleur. En fonction de votre situation spécifique, il peut être nécessaire de sélectionner la valeur nécessaire pour que le flou ne soit pas très visible - mais le lisse visuellement.

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

Comparaison des lignes de dégradé irrégulières et lisses

Exemple CodePen:


J'espère qu'à l'avenir cela vous aidera à résoudre les problèmes.

Merci amakhrov pour l'idée avec "calc"
À mon avis, avec calc () ce sera plus fiable: ne dépend pas de la taille et de l'angle d'inclinaison

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