Comment puis-je créer un hexagone avec des bords supérieur et inférieur incurvés à l'aide de CSS ?

Amélioration de l'hexagone avec des bords supérieur et inférieur incurvés

Pour résoudre le problème de la création d'un hexagone entièrement incurvé à l'aide de CSS, examinons le code et comprenons comment le modifier. pour obtenir l'effet souhaité :

.hex {
  position: relative;
  margin: 1em auto;
  width: 10em;
  height: 17.32em;
  border-radius: 1em / 0.5em;  <!-- Border radius modification -->
  background: orange;
  transition: opacity .5s;
}

Le changement crucial dans ce code est la modification de la propriété border-radius. À l'origine, l'hexagone avait un rayon circulaire de 1em appliqué à la fois à sa largeur et à sa hauteur. En le modifiant à 1em/0,5em, nous créons effectivement un rayon de bordure elliptique. Ce rayon allongé permet la courbure des bords supérieur et inférieur, tandis que la largeur du demi-cercle reste constante.

Explication :

Pour comprendre la signification de cet ajustement, considérons un cercle et une ellipse. Un cercle a un rayon uniforme dans toutes les directions, tandis qu'une ellipse a des rayons différents le long de ses différents axes. En spécifiant le rayon de bordure comme « 1em / 0,5em », nous définissons une ellipse dont le rayon horizontal est de 1em (la largeur de l'hexagone) et son rayon vertical est de 0,5em (la moitié de la hauteur de l'hexagone). Cela se traduit par des bords incurvés en haut et en bas de l'hexagone.

Autre CSS :

Les éléments CSS supplémentaires créent deux pseudo-éléments, :before et : après, qui sont positionnés absolument à l’intérieur de l’hexagone. Ils héritent de la largeur, de la hauteur, du rayon de bordure et de l'arrière-plan de l'hexagone, créant ainsi deux hexagones superposés pivotés de 60 degrés dans des directions opposées. Ces hexagones pivotés créent l'illusion d'une courbe douce et continue sur tous les bords.

En mettant en œuvre ces modifications, vous pouvez obtenir un hexagone avec des bords entièrement incurvés, ce qui donne une forme plus attrayante et esthétique.

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!