Comment obtenir des bords lisses dans des images à dégradé linéaire incliné ?

Image d'arrière-plan avec dégradé linéaire : bords irréguliers revisités pour un résultat fluide

Lors de la création d'images inclinées à dégradé linéaire, il est courant de rencontrer des images irrégulières. bords sur la ligne triangulaire. Pour atténuer ce problème et obtenir un trait plus lisse, il est essentiel d'éviter d'arrêter brutalement les couleurs.

Solution :

La solution réside dans l'ajustement des points d'arrêt et de départ des couleurs dans le dégradé linéaire. En éloignant légèrement le point de départ de la deuxième couleur du point d'arrêt de la première couleur, une zone floue est créée, ce qui donne une ligne plus homogène.

CSS mis à jour :

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

Explication :

En modifiant les points d'arrêt et de départ du dégradé comme indiqué ci-dessus, la transition entre les deux couleurs est adoucie, éliminant le bord dur et produisant une ligne plus douce.

Cette solution est compatible avec la plupart des navigateurs modernes et apporte une amélioration significative de la qualité de rendu des images inclinées à dégradé linéaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!