Comment créer un bord incliné pour une division sans frontières ?

Créer un bord incliné sur un div : une nouvelle approche

Dans le but de créer un div incliné sans utiliser de bordures, nous avons exploré une solution alternative qui maintient la réactivité et permet l'inclusion de texte sans interférence de l'effet d'inclinaison.

Utilisation d'un pseudo asymétrique Élément

La clé pour obtenir le bord incliné réside dans l'utilisation d'un pseudo-élément asymétrique. En incorporant cet élément, nous séparons la couleur de fond du contenu du div. Voici l'implémentation :

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

Explication

Le pseudo élément est positionné de manière absolue au sein du div. La propriété transform-origin est définie dans le coin inférieur droit de l'élément, garantissant que l'effet d'inclinaison provient de ce point. L'inclinaison réelle est appliquée via la propriété transform, en faisant pivoter l'élément de 45 degrés dans le sens inverse des aiguilles d'une montre. En attribuant au pseudo-élément un z-index négatif, nous le plaçons derrière le contenu du div, cachant ainsi efficacement les parties débordantes.

Cette approche nous permet d'ajouter du texte dans le div sans compromettre l'effet de bord incliné.

Exemple

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