Comment puis-je incliner les éléments CSS tout en gardant un alignement parfait du texte ?

Incliner les éléments avec un alignement du texte préservé

En CSS, il est possible d'incliner les éléments tout en conservant l'alignement de leur texte. Cette technique est particulièrement utile lors de la création de boutons de menu avec des bordures diagonales, comme le montre l'image ci-dessous.

Pour obtenir cet effet, suivez ces étapes :

1. Incliner le parent Élément : Appliquer la transformation : skew(); à l'élément parent (par exemple, li dans cet exemple) pour l'incliner selon un angle spécifique.
2. Inverser l'inclinaison des éléments enfants : appliquer la transformation : skew(-angle); aux éléments enfants (par exemple, a dans cet exemple) pour inverser l'inclinaison et restaurer l'alignement du texte.

Voici un 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;
}

Ce code crée un menu avec des boutons asymétriques et des bordures diagonales. Lorsque vous survolez un bouton, il devient noir et la couleur du texte passe au blanc, démontrant l'effet d'inclinaison inverse.

En comprenant cette technique, vous pouvez créer des éléments de menu visuellement attrayants avec des bordures diagonales et maintenir un alignement parfait 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!