Comment créer un div incliné sans utiliser de bordures en CSS ?

Créer un div incliné sans utiliser de bordures

Problème :

Créer un div incliné à l'aide de bordures n'est pas réalisable lorsque le div est placé sur une image. Comment créer un bord incliné à l'aide de CSS qui est également réactif ?

Solution :

Un pseudo-élément asymétrique peut être utilisé pour créer l'arrière-plan incliné. Cette approche maintient le texte non affecté par l'opération de transformation. Voici comment y parvenir :

1. Positionnez le pseudo-élément :
   Ajoutez un pseudo-élément :after au div avec un positionnement absolu.
2. Définissez l'inclinaison :
   Utilisez le -webkit-transform: skew(-45deg); propriété (ou ses préfixes de fournisseur) pour incliner le pseudo-élément de 45 degrés.
3. Définissez l'origine de la transformation :
   Spécifiez l'origine de la transformation : 100 % 0 ; pour permettre au pseudo-élément de s'incliner à partir du coin inférieur droit.
4. Masquer le débordement :
   Ajouter un débordement : caché ; au pseudo-élément pour masquer les parties débordantes.
5. Empiler derrière le contenu :
   Utilisez un z-index négatif sur le pseudo-élément pour l'empiler derrière le contenu du div.

Exemple Code :

div {
  position: relative;
  display: inline-block;
  padding: 1em 5em 1em 1em;
  overflow: hidden;
  color: #fff;
}

div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}

body {
  background: url("https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg");
  background-size: cover;
}

HTML :

<div>slanted div text</div>
<div>
  slanted div text<br />
  on several lines<br />
  an other line
</div>
<div>wider slanted div text with more text inside</div>

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!