Wie erstelle ich ein schräges Div ohne die Verwendung von Rahmen in CSS?

Erstellen eines schrägen Div ohne Verwendung von Rändern

Problem:

Das Erstellen eines schrägen Div mithilfe von Rändern ist nicht möglich, wenn die div wird über einem Bild platziert. Wie kann mit CSS eine schräge Kante erstellt werden, die auch responsiv ist?

Lösung:

Ein schräges Pseudoelement kann verwendet werden, um den schrägen Hintergrund zu erstellen. Bei diesem Ansatz bleibt der Text von der Transformationsoperation unberührt. So erreichen Sie das:

1. Positionieren Sie das Pseudoelement:
   Fügen Sie dem Div ein :after-Pseudoelement mit absoluter Positionierung hinzu.
2. Definieren Sie den Skew:
   Verwenden Sie die -webkit-transform: skew(-45deg); Eigenschaft (oder ihre Herstellerpräfixe), um das Pseudoelement um 45 Grad zu neigen.
3. Legen Sie den Transformationsursprung fest:
   Geben Sie den Transformationsursprung an: 100 % 0; um zu ermöglichen, dass das Pseudoelement von der rechten unteren Ecke aus geneigt wird.
4. Überlauf ausblenden:
   Überlauf hinzufügen: versteckt; zum Pseudoelement, um die überlaufenden Teile zu verbergen.
5. Hinter Inhalt stapeln:
   Verwenden Sie einen negativen Z-Index für das Pseudoelement, um es hinter dem Inhalt des Div zu stapeln.

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

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>

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein schräges Div ohne die Verwendung von Rahmen in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!