


Comment créer un bouton hexagonal allongé avec des flèches en utilisant uniquement CSS ?
Dec 03, 2024 am 06:16 AMBouton allongé en forme d'hexagone avec un seul élément
Défi :
Notre objectif est de créer un hexagone allongé- bouton en forme utilisant uniquement CSS, sans compter sur des éléments supplémentaires. Le bouton doit comporter une bordure étendue en forme de ruban avec des flèches pointant vers l'extérieur des deux côtés.
Solution 1 (fournie dans la question) :
Cette approche utilise deux pseudo -elements (::before et ::after) pour créer les bordures du ruban. Cependant, cela entraîne une asymétrie et un mauvais centrage des pointes de flèches.
Solution améliorée :
Pour affiner la conception et remédier aux limitations, nous proposons une solution alternative qui utilise une stratégie CSS différente :
Concept :
Cette approche implique :
- Utiliser les pseudo-éléments ::before et ::after qui constituent la moitié de la taille de l'élément du bouton principal.
- Positionner ces pseudo-éléments pour former le haut et le bas moitiés de l'hexagone.
- Utiliser rotateX avec perspective pour obtenir l'inclinaison souhaitée effet.
Mise en œuvre :
/* General Button Style */ .button { /* Properties as before... */ } /* Pseudo-elements */ .button:before, .button:after { position: absolute; content: ''; width: 300px; left: 0px; height: 34px; z-index: -1; } .button:before { /* Top half; adjust rotation here... */ } .button:after { /* Bottom half; adjust rotation here... */ top: 40px; } /* Button Border Style */ .button.border:before, .button.border:after { /* Properties as before... */ } /* Etc., omitted for brevity */
Explication :
- Les pseudo-éléments sont placé absolument dans l'élément bouton principal.
- Le pseudo-élément supérieur tourne dans le sens des aiguilles d'une montre tandis que le le bas tourne dans le sens inverse des aiguilles d'une montre, donnant l'apparence d'une inclinaison.
- Les bordures sont appliquées aux pseudo-éléments, créant la forme hexagonale.
- Cette conception permet une personnalisation complète de la forme et du bouton du bouton. dimensions en ajustant la largeur et la hauteur des pseudo-éléments, ainsi que leurs propriétés de transformation.
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Faire votre première transition Svelte personnalisée

Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques

Téléchargement de fichiers avec Multer dans Node.js et Express
