Wie kann ich mit CSS ein Sechseck mit vollständig gekrümmten Kanten erstellen?

Erstellen von Sechsecken mit gekrümmten Kanten mit CSS

Um ein Sechseck mit gekrümmten Kanten mit CSS zu erstellen, können Sie die folgenden Strategien anwenden:

Original-CSS und Problem

Das von Ihnen bereitgestellte CSS erstellt ein Sechseck mit einer Kurve Kanten auf vier Seiten, wobei die oberen und unteren Kanten gerade bleiben.

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

Lösung: Verwenden von CSS-Transformationen

Um die oberen und unteren Kanten des Sechsecks zu krümmen, Sie können CSS-Transformationen verwenden, um das gesamte Sechseck um 60 Grad zu drehen. Indem Sie diese Drehung sowohl auf das Sechseck als auch auf seine Pseudoelemente anwenden, erzeugen Sie die Illusion eines glatten, gekrümmten Sechsecks.

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

Durch diese Anpassungen erstellen Sie eine sechseckige Form mit gekrümmten Kanten an allen sechs Seiten. Die Eigenschaft border-radius erzeugt die gekrümmten Ecken, während die CSS-Transformationen die Illusion eines vollständig gekrümmten Sechsecks erzeugen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS ein Sechseck mit vollständig gekrümmten Kanten erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!