Maison > interface Web > tutoriel CSS > Comment créer un arrière-plan incliné avec CSS ?

Comment créer un arrière-plan incliné avec CSS ?

Mary-Kate Olsen
Libérer: 2024-11-06 18:46:02
original
813 Les gens l'ont consulté

How to Create a Slanted Background with CSS?

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

Dans cette question, l'utilisateur vise à créer un arrière-plan incliné en utilisant CSS. Ils fournissent une image montrant la mise en page souhaitée et décrivent le code qu'ils ont essayé, qui n'a pas produit le résultat escompté.

Pour obtenir l'arrière-plan incliné souhaité, nous pouvons utiliser un pseudo-élément avec transformation inclinée. Cette technique offre un contrôle précis sur l'angle et la position de l'élément incliné.

Le code suivant montre comment créer un arrière-plan incliné :

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;
}
Copier après la connexion

Dans ce code, nous introduisons un pseudo- élément, ":before", qui servira d'arrière-plan incliné. Nous positionnons ce pseudo-élément absolument au sein du corps pour contrôler son placement. La propriété "transform: skew(-30deg)" incline le pseudo-élément, créant un effet incliné. La propriété "transform-origin: top" spécifie que l'inclinaison doit provenir du haut du pseudo-élément, garantissant que l'arrière-plan s'incline sur tout l'élément.

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal