Wie erreicht man mit einem schrägen Pseudoelement eine schräge Kante auf einem Div?

Erstellen einer schrägen Kante auf einem Div

Einführung

Das Erzielen einer schrägen Kante auf einem Div mithilfe von CSS kann eine Herausforderung sein, insbesondere wenn es um eine geht reaktionsfähige Lösung. Dieses Thema wurde bereits besprochen, aber lassen Sie uns einen alternativen Ansatz erkunden.

Verwendung eines schrägen Pseudoelements

Um einen schrägen Hintergrund zu erstellen, können wir ein schräges Pseudoelement verwenden. Dadurch können wir den Text von der Transformationseigenschaft unberührt lassen.

Die Transformationsursprungseigenschaft positioniert die Schräge des Pseudoelements von der rechten unteren Ecke aus, während overflow:hidden; verbirgt die überfüllten Abschnitte. Schließlich platziert ein negativer Z-Index das Pseudoelement hinter dem Inhalt des Div.

CSS-Implementierung

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

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

Das obige ist der detaillierte Inhalt vonWie erreicht man mit einem schrägen Pseudoelement eine schräge Kante auf einem Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!