Comment puis-je créer un bouton hexagonal allongé avec des flèches en utilisant un seul élément HTML ?

Création d'un bouton allongé en forme d'hexagone avec un seul élément HTML

Problème :

Concevez un bouton de forme hexagonale allongée, comportant des flèches aux deux extrémités, en utilisant un seul élément HTML et CSS.

Défi :

L'utilisation des éléments :before et :after créerait deux flèches d'un côté, nécessitant un élément supplémentaire. De plus, l'alignement et le dimensionnement des flèches sont problématiques.

Solution avec un seul élément :

Pour relever ces défis, une approche alternative a émergé qui utilisait deux pseudo-éléments au sein un seul élément :

1. Pseudo-Éléments :Les :avant et Les pseudo-éléments :after, tous deux de la moitié de la taille du bouton principal, forment les moitiés supérieure et inférieure de la forme.
2. Positionnement : L'élément :before est placé en haut avec un perspective et rotation pour obtenir l'effet incliné. L'élément :after est positionné en dessous et pivoté pour créer l'angle opposé.
3. Manipulation de la bordure : En supprimant la bordure à certains points, l'apparence d'un hexagone est créée, avec des flèches s'étendant à les deux extrémités.

Exemple de code :

.button {
  position: relative;
  display: block;
  background: transparent;
  width: 300px;
  height: 80px;
  ...

  .button:before,
  .button:after {
    position: absolute;
    content: '';
    width: 300px;
    left: 0px;
    height: 34px;
    z-index: -1;
  }

  .button:before {
    transform: perspective(15px) rotateX(3deg);
  }
  .button:after {
    top: 40px;
    transform: perspective(15px) rotateX(-3deg);
  }

  /* Button Border Style */

  .button.border:before,
  .button.border:after {
    border: 4px solid #e04e5e;
  }
  .button.border:before {
    border-bottom: none;
  }
  .button.border:after {
    border-top: none;
  }

  /* Button hover styles */

  .button.border:hover:before,
  .button.border:hover:after {
    background: #e04e5e;
  }
  .button.border:hover {
    color: #fff;
  }
}

Avec ceci approche, le bouton allongé en forme d'hexagone peut être créé en utilisant un seul élément HTML et CSS, sans avoir besoin d'éléments supplémentaires.

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!