Comment puis-je créer un hexagone entièrement incurvé en utilisant CSS ?

Courber les bords d'un hexagone à l'aide de CSS

Le code CSS fourni crée avec succès un hexagone avec des bords arrondis sur quatre côtés, cependant, le les bords supérieur et inférieur restent plats. Pour obtenir un hexagone entièrement incurvé, des ajustements sont nécessaires.

CSS original :

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

Pour courbez les bords supérieur et inférieur de l'hexagone, le CSS suivant peut être ajouté :

.curved-hexagon {
  position: relative;
  width: 100px;
  height: 55px;
  background: red;
  border-radius: 10px 10px 0 0 / 10px 10px 29px 29px;
}

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

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

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

Dans ce fichier modifié CSS :

• La propriété border-radius est mise à jour pour spécifier une courbe sur les bords supérieur et inférieur.
• La propriété transform sur les pseudo-éléments est supprimée, car elle n'est pas plus nécessaire.

Cela se traduira par un hexagone où tous les bords sont incurvés, y compris les bords supérieur et inférieur.

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!