Comment obtenir un bord incliné sur une division à l'aide d'un pseudo-élément asymétrique ?

Créer un bord incliné sur un div

Introduction

Réaliser un bord incliné sur un div à l'aide de CSS peut être un défi, surtout lorsque l'on vise un solution réactive. Ce sujet a déjà été abordé, mais explorons une approche alternative.

Utiliser un pseudo-élément asymétrique

Pour créer un arrière-plan incliné, nous pouvons utiliser un pseudo-élément asymétrique. Cela nous permet de garder le texte non affecté par la propriété transform.

La propriété transform origin positionne l'inclinaison du pseudo-élément à partir du coin inférieur droit, tandis que overflow:hidden; cache les sections débordantes. Enfin, un z-index négatif place le pseudo-élément derrière le contenu du div.

Implémentation CSS

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

Utilisation 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!