Comment éliminer les bords irréguliers dans les triangles de dégradé linéaire ?

Lisser les bords irréguliers de l'image d'arrière-plan avec un dégradé linéaire

Lors de la création d'effets en forme de triangle au bas d'une image à l'aide de dégradés linéaires, les utilisateurs rencontrent souvent des bords irréguliers qui nuire à une transition en douceur. Pour résoudre ce problème, nous allons explorer une solution qui élimine ces bords irréguliers.

Arrière-plan

L'utilisateur a tenté de former des triangles à la base d'une image en utilisant deux dégradés linéaires. Malgré la réactivité de cette méthode, les bords des triangles présentaient des irrégularités. L'objectif est d'obtenir une transition transparente et fluide dans les navigateurs modernes.

Solution

Les bords irréguliers des images à dégradé linéaire apparaissent lorsque la couleur change brusquement. Pour surmonter ce problème, nous pouvons éviter d’utiliser le même point d’arrêt pour différentes couleurs. Plus précisément, nous pouvons légèrement décaler le point de départ de la deuxième couleur du point d’arrêt de la première. Cela crée une zone floue qui rend la transition plus fluide.

Voici une version améliorée du code CSS :

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

Résultats améliorés

En ajustant les points d'arrêt et de départ des dégradés linéaires, les bords irréguliers disparaissent, ce qui entraîne une transition douce du blanc au transparent. L'effet en forme de triangle au bas de l'image est obtenu sans compromettre l'attrait visuel global.

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!