Maison >interface Web >tutoriel CSS >Comment créer un hexagone CSS avec des bords entièrement incurvés ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-12-02 01:44:15980parcourir

How to Create a CSS Hexagon with Fully Curved Edges?

Hexagone à bords incurvés CSS

En utilisant CSS, vous pouvez créer un hexagone avec des bords incurvés. Cependant, vous pouvez rencontrer un problème où les bords supérieur et inférieur restent droits. Voici une solution pour rendre tous les bords courbés :

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 :

Remplacer l'original CSS avec le suivant :

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

HTML :

<div>

Cette approche crée un hexagone avec des bords incurvés en utilisant le rayon de bordure et les transformations.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn