Maison >interface Web >tutoriel CSS >Comment créer un arrière-plan incliné à l'aide de pseudo-éléments CSS ?

Comment créer un arrière-plan incliné à l'aide de pseudo-éléments CSS ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-09 02:09:02894parcourir

How to Create a Slanted Background Using CSS Pseudo Elements?

Création d'arrière-plans inclinés avec CSS

La création d'un arrière-plan incliné peut être réalisée à l'aide d'une variété d'options de style CSS. Une approche efficace consiste à utiliser des pseudo-éléments ainsi que des transformations d'inclinaison.

Implémentation avec un pseudo-élément CSS

Le code CSS suivant montre comment créer un arrière-plan incliné à l'aide d'un pseudo-élément. :

body {
  height: 100vh;
  margin: 0;
  background: yellow;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  background: #000;
  transform: skew(-30deg);
  transform-origin:top;
}

Ce code crée un 斜斜背景 situé sur le côté gauche du conteneur. La propriété transform: skew(-30deg) incline le pseudo-élément, ce qui donne l'inclinaison souhaitée.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn