Maison >interface Web >tutoriel CSS >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 :
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!