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

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

DDD

Libérer： 2024-12-02 13:22:10

original

252 Les gens l'ont consulté

How Can I Create a Fully Curved Hexagon Using 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;
}

Copier après la connexion

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);
}

Copier après la connexion

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!