Wie kann ich mit CSS ein vollständig gebogenes Sechseck erstellen?

Kurven der Kanten eines Sechsecks mit CSS

Der bereitgestellte CSS-Code erstellt erfolgreich ein Sechseck mit abgerundeten Kanten an vier Seiten Ober- und Unterkante bleiben flach. Um ein vollständig gekrümmtes Sechseck zu erreichen, sind Anpassungen erforderlich.

Original CSS:

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

Zu Um die Ober- und Unterkante des Sechsecks zu krümmen, kann das folgende CSS hinzugefügt werden:

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

In dieser Änderung CSS:

• Die Eigenschaft „border-radius“ wurde aktualisiert, um eine Kurve am oberen und unteren Rand anzugeben.
• Die Eigenschaft „transform“ für die Pseudoelemente wurde entfernt, da sie nicht vorhanden ist länger benötigt.

Dies führt zu einem Sechseck, bei dem alle Kanten gebogen sind, einschließlich der Ober- und Unterkante.

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