Comment créer un arrière-plan bicolore avec une séparation diagonale à l'aide de CSS ?

Création d'un arrière-plan bicolore avec séparation diagonale à l'aide de CSS

L'objectif est de créer un arrière-plan composé de deux moitiés séparées par un ligne diagonale, chaque moitié présentant une couleur ou une texture distincte. L'intention est d'implémenter cette conception en utilisant deux divs distincts pour faciliter les animations jQuery où cliquer de chaque côté déclenche l'expansion ou la contraction du triangle respectif, simulant un effet de rideau.

Solution :

L'approche recommandée consiste à utiliser un dégradé d'arrière-plan avec un point de transition net. Cela fournit une méthode propre et efficace pour obtenir l'effet souhaité.

Code CSS :

<code class="css">.diagonal-split-background {
  background-color: #013A6B;
  background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}</code>

Dans ce code, la classe diagonal-split-background est appliquée à l’élément conteneur. La propriété background-color définit la couleur unie pour la moitié de l'arrière-plan, tandis que la propriété background-image établit un dégradé linéaire, divisant efficacement l'arrière-plan le long d'une ligne diagonale. Le paramètre d'angle de 30 degrés définit l'orientation de la division diagonale. Les deux valeurs de couleur dans le dégradé déterminent les teintes des moitiés respectives.

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!