Comment incliner un conteneur tout en gardant son texte inchangé ?

Comment incliner un élément tout en gardant le texte normal (non incliné)

Créer un bouton incliné avec un texte non incliné

Pour créer un élément asymétrique avec un texte non incliné, vous pouvez appliquer une transformation à la fois au parent et à l'enfant elements :

Incliner l'élément parent :

Utilisez la propriété transform: skew() pour incliner l'élément parent (dans ce cas, l'élément

) .

Désincliner l'élément enfant :

Appliquer un élément opposé transformer en élément enfant (l'élément ) à l'aide de transform: skew(-angle), où angle est la même valeur que celle appliquée à l'élément parent. Cela annulera l'inclinaison du texte.

Exemple de code :

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>

Résultat :

Cela créera un menu avec des boutons inclinés mais texte non incliné, permettant un effet d'angle sans déformer la lisibilité des liens.

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!