Comment puis-je incliner l'arrière-plan d'un élément tout en gardant son texte aligné horizontalement à l'aide de CSS ?

Créer des éléments asymétriques tout en préservant l'alignement du texte

Dans le domaine du CSS, obtenir certains effets visuels nécessite une réflexion innovante. L'un de ces effets consiste à créer des éléments asymétriques sans déformer le texte qu'ils contiennent.

Imaginez que vous souhaitiez reproduire l'image ci-dessous, où le fond marron apparaît en diagonale lorsque vous survolez l'élément de menu :

[ Image d'un élément de menu marron incliné avec du texte blanc]

Pour ce faire, vous pouvez utiliser une combinaison d'inclinaison et d'inclinaison inverse. La clé réside dans l’application de skew() à l’élément parent (dans ce cas, li) et de skew(-deg) à son élément enfant (la balise d’ancrage, a). Cela annule l'inclinaison, garantissant que le texte reste horizontal tandis que l'arrière-plan est incliné.

Voici le CSS pertinent :

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

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

De plus, vous pouvez ajouter des états de survol pour changer la couleur d'arrière-plan. et la couleur du texte lorsque l'utilisateur survole l'élément de menu :

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

En combinant ces techniques CSS, vous pouvez créer des éléments asymétriques tout en conservant un bon alignement du texte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!