Comment créer des extrémités pointues aux bords lisses pour une image d'arrière-plan à l'aide de dégradés linéaires ?

Ajustement du dégradé linéaire pour une image d'arrière-plan aux bords lisses Extrémités pointues

Problème :

Création d'un bord inférieur pointu pour une image avec deux triangles réactifs utilisant un dégradé linéaire produit un bord irrégulier.

Solution :

Pour éliminer le bord irrégulier, évitez d'arrêter brusquement les couleurs dans l'image à dégradé linéaire . Au lieu de cela, modifiez les points d'arrêt pour créer un effet de flou subtil :

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

Cet ajustement éloigne légèrement le début de la deuxième couleur de la fin de la première couleur, ce qui entraîne un transition plus douce.

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!