Wie kann ich CSS-Elemente verzerren und gleichzeitig die Textausrichtung perfekt halten?

Elemente mit beibehaltener Textausrichtung neigen

In CSS ist es möglich, Elemente zu neigen und dabei die Ausrichtung ihres Textes beizubehalten. Diese Technik ist besonders nützlich, wenn Sie Menüschaltflächen mit diagonalen Rändern erstellen, wie im Bild unten gezeigt.

Um diesen Effekt zu erzielen, befolgen Sie diese Schritte:

1. Neigen Sie das übergeordnete Element Element: Transformation anwenden: skew(); zum übergeordneten Element (z. B. li in diesem Beispiel), um es in einem bestimmten Winkel zu neigen.
2. Umgekehrte Neigung der untergeordneten Elemente: Apply transform: skew(-angle); zu den untergeordneten Elementen (z. B. a in diesem Beispiel), um die Schrägstellung umzukehren und die Textausrichtung wiederherzustellen.

Hier ist ein 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;
}

Dieser Code erstellt ein Menü mit schrägen Knöpfen und diagonalen Rändern. Wenn Sie mit der Maus über eine Schaltfläche fahren, wird diese schwarz und die Textfarbe ändert sich in Weiß, was den umgekehrten Skew-Effekt zeigt.

Wenn Sie diese Technik verstehen, können Sie optisch ansprechende Menüelemente mit diagonalen Rändern erstellen und eine perfekte Textausrichtung beibehalten.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Elemente verzerren und gleichzeitig die Textausrichtung perfekt halten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!