Comment obtenir une ligne lisse avec un dégradé linéaire dans un fond triangulaire ?

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 initiale, 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é de dégradé linéaire de la manière suivante :

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

En ajustant l'arrêt et le démarrage Comme indiqué, la transition de couleur devient moins abrupte, améliorant ainsi 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é.

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!