Comment puis-je créer un bouton hexagonal allongé en utilisant un seul élément HTML et CSS ?

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

Problème :

Peut vous créez un bouton de forme hexagonale en utilisant uniquement HTML et CSS sans recourir à plusieurs éléments ?

Solution possible :

Vous trouverez ci-dessous une méthode alternative pour obtenir cet effet en utilisant un seul élément :

1. Utiliser des pseudo-éléments : Employez des pseudo-éléments :before et :after qui imitent la moitié de la taille du bouton principal, y compris bordures.
2. Définir les moitiés de forme : L'élément :before forme la moitié supérieure de la forme, tandis que :after forme la moitié inférieure. Chacun a une hauteur et une disposition de bordure spécifiques pour ressembler à un hexagone.
3. Inclinaison et position : RotateX avec perspective est utilisé pour incliner les pseudo-éléments et les positionner de manière appropriée pour former la forme globale du bouton. .

Exemple Code :

/* General Button Style */
.button {
  position: relative;
  display: block;
  background: transparent;
  width: 300px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: #e04e5e;
  margin: 40px auto;
  font-family: Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

.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 {
  border: 4px solid #e04e5e;
}

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

.button.border:hover {
  color: #fff;
}

<a href="#" class="button border">Click me!</a>

Remarque : Pour utiliser les préfixes du navigateur, incluez modernizr ou les préfixes.

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!