Comment implémenter des polygones en CSS

Comment implémenter des polygones en CSS : créez d'abord un exemple de fichier HTML ; puis implémentez le parallélogramme via l'attribut skew de transform ; puis utilisez le pseudo-élément before pour implémenter le triangle et enfin combinez les lignes et les triangles du parallélogramme pour implémenter le ; polygone.

L'environnement d'exploitation de cet article : système windows7, version HTML5&&CSS3, ordinateur DELL G3

Comment implémenter des polygones en css ?

CSS | Réaliser des polygones intéressants

Le chemin vers le développement front-end est long. Sur le chemin du monde du Web, nous avons dû rencontrer des conceptions polygonales. Le moyen le plus simple est de simplement télécharger l'image et de commencer. un professionnel Le front-end de la « poursuite » est bien sûr « l'auto-abus »... Aujourd'hui, nous allons parler de la façon d'implémenter des polygones dans la programmation frontale. Prenons d'abord une photo, afin de pouvoir réfléchir à la manière de le faire. mettez-le en œuvre en premier.

Rendu

"Comment l'implémenter", "Y a-t-il du texte en italique vers le haut", "Parole Dieu, donne-moi juste l'image directement, c'est tellement gênant". Détendez-vous, respirez profondément et suivez-moi pour voir comment peaufiner CSS.

Ce polygone en forme d'étiquette peut être vu comme une combinaison d'un parallélogramme et d'un triangle rectangle :

Largeur et hauteur simples

Alors comment le rectangle devient-il un parallélogramme ? Prenons l'exemple d'un rectangle fait de fil de fer. Comment le transformer en parallélogramme ? Quelqu'un a répondu : C'est très simple, il suffit de le tourner un peu. À propos, c'est la distorsion, l'attribut asymétrique de la transformation.

transform: skew(-10deg);

Hé, quelqu'un a demandé à ce moment-là, n'est-ce pas incliné vers le haut ? Comment casser, ne vous inquiétez pas, regardez :

transformation : inclinaison(-10deg) rotation(-8deg)

Bon, c'est presque fini, mais il y a quand même un triangle, ici, la photo ci-dessus :

Utiliser width:0;height: 0

Le code est le suivant :

Code triangle

Pourquoi utiliser le pseudo-élément before ? Vous savez, pour faciliter la mise en page, la largeur et la hauteur sont toutes deux très intelligemment 0, et la couleur et la position de la bordure sont utilisées pour la définir, y compris la plupart des polygones que vous voyez habituellement, ce qui est presque le même principe. Le code final est le suivant :

En tant qu'explorateur CSS, essayez de définir différentes bordures et de les combiner avec transform pour voir quels effets ingénieux il existe. Étoiles à cinq branches, octogones... Avec cela à portée de main, allons-y. attaquer le monde polygonal.

Apprentissage recommandé : "Tutoriel vidéo CSS"

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!