Wie erstelle ich ein schräges Div mit Text nur mit CSS?

Eine schräge Kante zu einem Div erstellen

Sie möchten ein schräges Div erstellen, das Text ohne die Verwendung von Rahmen enthält. Um dies zu erreichen, kann der folgende CSS-Code verwendet werden:

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

Erklärung:

• Ein schräges Pseudoelement wird verwendet, um den schrägen Hintergrund zu erstellen. Dadurch wird verhindert, dass der Text durch Transformationen beeinträchtigt wird.
• Die Eigenschaft „Transformationsursprung“ ermöglicht die Schrägstellung des Pseudoelements von rechts unten Ecke.
• Overflow:hidden; verbirgt die überlaufenden Teile des Pseudoelements.
• Text wird mit negativem Z-Index hinter dem Hintergrund gestapelt.

Verwendungsbeispiel:

<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 mit Text nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!