Wie erstelle ich eine reaktionsfähige schräge Kante für ein Div, ohne die darunter liegenden Bilder zu verdecken?

Erstellen Sie eine reaktionsfähige schräge Kante für ein Div

Problem:

Erstellen Sie eine schräge Kante für ein Div, ohne Rahmen zu verwenden das wird das zugrunde liegende verschleiern Bilder.

Lösung:

Schräges Pseudoelement:

Verwenden Sie ein schräges Pseudoelement, um den schrägen Hintergrund zu erstellen und gleichzeitig beizubehalten den Textinhalt darüber.

Transformieren Ursprung:

Setzen Sie den Transformationsursprung des Pseudoelements auf den gewünschten Ankerpunkt für die Neigung (in diesem Fall rechte untere Ecke).

Schrägtransformation:

Wenden Sie eine Skew-Transformation auf das Pseudoelement an, um es entsprechend zu neigen (z. B. -45). Grad).

Überlauf:

Überlauf verwenden: versteckt; um alle überlaufenden Teile des Pseudoelements auszublenden.

Negativer Z-Index:

Positionieren Sie das Pseudoelement mit einem negativen Z-Index hinter dem div-Inhalt.

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

Ergebnis:

Mit dieser Lösung können Sie ansprechende schräge Kanten für Divs erstellen, die sich nicht auf deren Textinhalt auswirken.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine reaktionsfähige schräge Kante für ein Div, ohne die darunter liegenden Bilder zu verdecken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!