Le dégradé linéaire crée des bords irréguliers dans l'image d'arrière-plan : comment lisser la ligne

Dans le but de créer un bord inférieur pointu sur une image , on peut opter pour la réalisation de deux triangles réactifs à la base. Cependant, obtenir une ligne fluide dans une telle conception peut s’avérer difficile. Comme mentionné dans la question d'origine, le dégradé linéaire utilisé à cette fin a tendance à présenter des bords irréguliers en raison de son comportement « d'arrêt brutal ».

La solution réside dans la modification des transitions de couleurs au sein du dégradé. En éloignant légèrement le point de départ de la deuxième couleur du point final de la première, on peut introduire un subtil effet de flou. Cela atténue la transition de couleur nette et donne une ligne plus douce.

En faisant référence au code d'origine, modifiez la propriété linéaire-gradient de la manière suivante :

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

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

En ajustant les points d'arrêt et de départ comme indiqué, la transition de couleur devient moins abrupte, améliorant la douceur de la ligne à la base du triangle. Il convient de noter que cette résolution assure la compatibilité avec la plupart des navigateurs modernes sans compromettre la réactivité.