Wie kann ich mithilfe von CSS den Hintergrund eines Elements verzerren und gleichzeitig den Text horizontal ausrichten?

Erstellen Sie verzerrte Elemente unter Beibehaltung der Textausrichtung

Im Bereich CSS erfordert das Erreichen bestimmter visueller Effekte innovatives Denken. Ein solcher Effekt besteht darin, verzerrte Elemente zu erstellen, ohne den darin enthaltenen Text zu verzerren.

Stellen Sie sich vor, Sie möchten das Bild unten reproduzieren, in dem der braune Hintergrund diagonal erscheint, wenn Sie mit der Maus über den Menüpunkt fahren:

[ Bild eines schrägen braunen Menüpunkts mit weißem Text]

Um dies zu erreichen, können Sie eine Kombination aus Schräge und umgekehrter Schräge verwenden. Der Schlüssel liegt darin, skew() auf das übergeordnete Element (in diesem Fall li) und skew(-deg) auf sein untergeordnetes Element (das Anker-Tag a) anzuwenden. Dadurch wird die Schräglage aufgehoben und sichergestellt, dass der Text horizontal bleibt, während der Hintergrund abgewinkelt ist.

Hier ist das relevante CSS:

nav li {
  transform: skew(20deg);
}

nav li a {
  transform: skew(-20deg);
}

Zusätzlich können Sie Hover-Zustände hinzufügen, um die Hintergrundfarbe zu ändern und Textfarbe, wenn der Benutzer mit der Maus über den Menüpunkt fährt:

nav li:hover {
  background: #1a0000;
  color: #fff;
}

Durch die Kombination dieser CSS-Techniken können Sie optisch ansprechende Schräglagen erstellen Elemente unter Beibehaltung der korrekten Textausrichtung.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS den Hintergrund eines Elements verzerren und gleichzeitig den Text horizontal ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!