Comment créer un hexagone entièrement incurvé avec CSS ?

Comment créer un hexagone uniformément courbé à l'aide de CSS

Le CSS fourni courbe efficacement les quatre bords d'un hexagone, laissant le haut et le bas droit. Si vous désirez un hexagone entièrement courbé, les modifications suivantes peuvent être apportées :

Dans le code CSS, modifiez ce qui suit :

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

Et ajoutez ce qui suit :

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

Ce nouveau code génère une forme hexagonale avec des bords légèrement incurvés sur tous les côtés, y compris le haut et le bas.

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!