Comment créer un bouton hexagonal allongé avec des flèches en utilisant uniquement CSS ?

Bouton 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 :

1. Utiliser les pseudo-éléments ::before et ::after qui constituent la moitié de la taille de l'élément du bouton principal.
2. Positionner ces pseudo-éléments pour former le haut et le bas moitiés de l'hexagone.
3. 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!