Comment créer un arrière-plan bicolore divisé par une ligne diagonale en CSS ?

Création d'un arrière-plan bicolore divisé par une ligne diagonale en CSS

Diviser un arrière-plan en deux couleurs ou textures distinctes avec une ligne diagonale est un effet visuellement saisissant. Ceci peut être réalisé via CSS, comme démontré dans l'exemple suivant.

Pour créer un arrière-plan divisé en diagonale, suivez ces étapes :

1. Créez deux divs distincts pour représenter les deux côtés de l'arrière-plan. Attribuez-leur différentes classes, telles que « gauche » et « droite ».
2. Appliquez des arrière-plans de couleur unie ou de texture à chaque div à l'aide des propriétés background-color ou background-image.
3. Positionnez les divs. côte à côte en utilisant float ou display: inline-block.
4. Appliquez un dégradé linéaire à l'arrière-plan à l'aide de la propriété background-image. Utilisez une transition dure pour créer une ligne diagonale nette entre les couleurs ou les textures.

Voici un exemple d'extrait de code :

<code class="css">.diagonal-split-background {
  width: 50%;
  height: 100vh;
  float: left;
}

.left {
  background-color: #013A6B;
}

.right {
  background-image: url("texture.jpg");
}

.diagonal-split-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}</code>

Ce code crée un arrière-plan divisé en diagonale avec un solide couleur grise sur le côté gauche et une texture sur le côté droit. La ligne diagonale est créée à l'aide d'un dégradé linéaire de 30 degrés.

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!