Maison >interface Web >tutoriel CSS >Comment obtenir un bord incliné sur une division à l'aide d'un pseudo-élément asymétrique ?

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

DDD
DDDoriginal
2024-11-13 05:44:02361parcourir

How to Achieve a Slanted Edge on a Div Using a Skewed Pseudo Element?

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!

Déclaration:
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