Comment créer un bord incliné réactif pour une division sans obscurcir les images sous-jacentes ?

Créer un bord incliné réactif pour un div

Problème :

Créer un bord incliné pour un div sans utiliser de bordures cela obscurcira les sous-jacents images.

Solution :

Pseudo-élément incliné :

Utiliser un pseudo-élément incliné pour créer un arrière-plan incliné tout en préservant le contenu du texte au-dessus.

Transformer Origine :

Définissez l'origine de la transformation du pseudo-élément sur le point d'ancrage souhaité pour l'inclinaison (coin inférieur droit dans ce cas).

Transformation d'inclinaison :

Appliquez une transformation d'inclinaison au pseudo-élément pour l'incliner en conséquence (par exemple, -45 degrés).

Débordement :

Utiliser le débordement : caché ; pour masquer toutes les parties débordantes du pseudo-élément.

Z-Index négatif :

Positionnez le pseudo-élément derrière le contenu div à l'aide d'un z-index négatif.

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;
}

Résultat :

Cette solution vous permet de créer des bords inclinés réactifs pour les divs qui n'affecteront pas leur contenu textuel.

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!