Comment puis-je créer un hexagone avec des bords entièrement incurvés à l'aide de CSS ?

Création d'hexagones à bords incurvés avec CSS

Pour créer un hexagone à bords incurvés à l'aide de CSS, vous pouvez utiliser les stratégies suivantes :

CSS et problème d'origine

Le CSS que vous avez fourni crée un hexagone avec bords incurvés sur quatre côtés, laissant les bords supérieur et inférieur droits.

#hexagon-circle {
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
    border-radius: 10px;
}
#hexagon-circle:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 29px solid red;
    border-radius: 10px;
}
#hexagon-circle:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 29px solid red;
    border-radius: 10px;
}

Solution : Utiliser des transformations CSS

Pour courber les bords supérieur et inférieur de l'hexagone , vous pouvez utiliser des transformations CSS pour faire pivoter tout l'hexagone de 60 degrés. En appliquant cette rotation à la fois à l'hexagone et à ses pseudo-éléments, vous créez l'illusion d'un hexagone lisse et incurvé.

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

.hex:before,
.hex:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}

.hex:before {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.hex:after {
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

En effectuant ces ajustements, vous créez une forme hexagonale avec des bords incurvés sur les six côtés. La propriété border-radius crée les coins incurvés, tandis que les transformations CSS donnent l'illusion d'un hexagone entièrement incurvé.

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!