Comment utiliser transform skewX en CSS3 pour implémenter un menu de navigation en parallélogramme

Le contenu de cet article explique comment utiliser transform skewX en CSS3 pour implémenter un menu de navigation en parallélogramme. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Un parallélogramme est en fait un sur-ensemble d'un rectangle : ses côtés sont parallèles deux à deux, mais ses angles ne sont pas nécessairement des angles droits. Dans la conception visuelle, les parallélogrammes peuvent souvent transmettre une impression de mouvement.
Essayons de créer un lien parallélogramme en forme de bouton en utilisant CSS. Notre point de départ est un bouton de bloc ordinaire, complété par quelques styles simples. Ensuite, nous pouvons utiliser la propriété de déformation de skew() pour étirer le rectangle en diagonale :

transform: skewX(-45deg);

Cependant, cela fait que son contenu est modifié. déformé en diagonale, ce qui est inesthétique et difficile à lire. Existe-t-il un moyen d'incliner simplement la forme du conteneur tout en gardant son contenu identique ?

Beaucoup de gens penseront à la solution des éléments imbriqués, nous pourrons alors appliquer une autre déformation reverse skew() au contenu pour compenser l'effet de déformation du conteneur, et enfin produire les résultats que nous attendons. Malheureusement, cela signifie que nous devrons utiliser une couche supplémentaire d'éléments HTML pour envelopper le contenu, comme un span :

<a href="m.sbmmt.com" class="button">
 <span>m.sbmmt.com</span>
</a>
.button { transform: skewX(-45deg); }
.button > span { transform: skewX(45deg); }

Comme nous pouvons le voir, cette méthode fonctionne bien, mais cela signifie aussi nous devons ajouter des éléments HTML supplémentaires. Si les modifications apportées à la couche structurelle ne sont pas autorisées ou si vous souhaitez conserver strictement la pureté de la couche structurelle, ne vous inquiétez pas, nous avons également une solution purement CSS.

Solution pseudo-élément

Une autre idée est d'appliquer tous les styles (arrière-plan, bordure, etc.) aux pseudo-éléments, puis de transformer les pseudo-éléments. Notre contenu n'étant pas contenu dans un pseudo-élément, le contenu ne sera pas affecté par la transformation. Voyons si cette technique peut obtenir le même style de lien qu'auparavant.

Nous souhaitons que les pseudo-éléments restent flexibles et héritent automatiquement des dimensions de leur élément hôte, même lorsque les dimensions de l'élément hôte sont déterminées par son contenu. Une solution simple consiste à appliquer le style position: relative à l'élément hôte et à définir position: absolue au pseudo-élément, puis à définir tous les décalages à zéro afin qu'il soit étiré jusqu'à la taille de l'élément hôte à la fois horizontalement et verticalement. Le code ressemble à ceci :

.button {
 position: relative;
 /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
 content: '';
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
}

À ce stade, le carré généré avec les pseudo-éléments chevauche le contenu. Une fois qu'un arrière-plan y est défini, il couvrira le contenu. Pour résoudre ce problème, nous pouvons définir le style z-index: -1 pour le pseudo-élément afin que son niveau d'empilement soit poussé derrière l'élément hôte. Maintenant, la dernière étape que nous devons faire est de le transformer autant que nous le souhaitons et de profiter des magnifiques résultats. La version finale du code est la suivante, et l'effet visuel qu'elle produit est exactement le même que la technique mentionnée ci-dessus :

.button {
 position: relative;
 /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
 content: ''; /* 用伪元素来生成一个矩形 */
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
 z-index: -1;
 background: #58a;
 transform: skew(45deg);
}

Cette technique n'est pas seulement utile pour la déformation skew(), mais s'applique également à tout autre style de déformation peut être utilisé lorsque l'on souhaite déformer un élément sans déformer son contenu. Par exemple, si nous ajustons légèrement cette technique au style de déformation rotate(), puis que nous l'utilisons sur un élément carré, nous pouvons facilement obtenir une forme de losange.

La clé de cette technique est que nous utilisons des pseudo-éléments et des attributs de positionnement pour créer une boîte, puis stylisons le pseudo-élément et le plaçons sous son élément hôte. Cette idée peut également être utilisée dans d’autres scènes pour obtenir divers effets.

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!