Wie kann man einen Container verzerren, ohne dass der Text verzerrt bleibt?

So neigen Sie ein Element, behalten aber den normalen Text bei (nicht schräg)

Erstellen einer schrägen Schaltfläche mit nicht schrägem Text

Zum Erstellen Wenn Sie ein verzerrtes Element mit nicht verzerrtem Text haben, können Sie eine Transformation sowohl auf das übergeordnete als auch auf das untergeordnete Element anwenden Elemente:

Schiefen des übergeordneten Elements:

Verwenden Sie die Eigenschaft transform: skew(), um das übergeordnete Element (in diesem Fall das

-Element) zu neigen. .

Verzerrung des untergeordneten Elements aufheben:

Anwenden Umgekehrte Transformation auf das untergeordnete Element (das -Element) mit transform: skew(-angle), wobei der Winkel der gleiche Wert ist, der auf das übergeordnete Element angewendet wird. Dadurch wird der Text entzerrt.

Beispielcode:

nav ul {
  padding: 0;
  display: flex;
  list-style: none;
}
nav li {
  transition: background 0.3s, color 0.3s;
  transform: skew(20deg); /* SKEW */
}

nav li a {
  display: block; /* block or inline-block is needed */
  text-decoration: none;
  padding: 5px 10px;
  font: 30px/1 sans-serif;
  transform: skew(-20deg); /* UNSKEW */
  color: inherit;
}

nav li.active,
nav li:hover {
  background: #000;
  color: #fff;
}

HTML:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Ergebnis:

Dadurch wird ein Menü mit verzerrten Schaltflächen erstellt, aber Nicht verzerrter Text, der einen Schrägeffekt ermöglicht, ohne die Lesbarkeit der Links zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie kann man einen Container verzerren, ohne dass der Text verzerrt bleibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!