Wie erstelle ich mit CSS ein vollständig gebogenes Sechseck?

So erstellen Sie ein gleichmäßig gekrümmtes Sechseck mit CSS

Ihr bereitgestelltes CSS krümmt effektiv die vier Kanten eines Sechsecks und lässt die Ober- und Unterseite übrig gerade. Wenn Sie ein vollständig gebogenes Sechseck wünschen, können die folgenden Änderungen vorgenommen werden:

Ändern Sie im CSS-Code Folgendes:

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

Und fügen Sie Folgendes hinzu:

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

Dieser neue Code generiert eine Sechseckform mit sanft geschwungenen Kanten an allen Seiten, einschließlich der Ober- und Unterseite.

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