Wie erstelle ich eine schräge Kante für ein Div ohne Ränder?

Eine schräge Kante zu einem Div erstellen: Ein neuartiger Ansatz

In einem Versuch, ein schräges Div ohne die Verwendung von Rändern zu erstellen, haben wir eine alternative Lösung untersucht, die die Reaktionsfähigkeit beibehält ermöglicht die Texteinbindung ohne Beeinträchtigung durch den Schrägungseffekt.

Verwendung eines schrägen Pseudoelements

Der Schlüssel zum Erreichen der schrägen Kante liegt in der Verwendung eines schrägen Pseudoelements. Durch die Einbindung dieses Elements trennen wir die Hintergrundfarbe vom Inhalt des Div. Hier ist die 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;
}

Erklärung

Das Pseudoelement ist absolut innerhalb des div positioniert. Die Eigenschaft „transform-origin“ wird auf die rechte untere Ecke des Elements festgelegt, um sicherzustellen, dass der Skew-Effekt von diesem Punkt ausgeht. Die tatsächliche Neigung wird über die Transformationseigenschaft angewendet, indem das Element um 45 Grad gegen den Uhrzeigersinn gedreht wird. Indem wir dem Pseudoelement einen negativen Z-Index geben, platzieren wir es hinter dem Inhalt des Div und verbergen so effektiv die überlaufenden Teile.

Dieser Ansatz ermöglicht es uns, Text innerhalb des Div hinzuzufügen, ohne den Effekt der schrägen Kante zu beeinträchtigen.

Beispiel

<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 eine schräge Kante für ein Div ohne Ränder?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!