Wie kann ich mit CSS ein Sechseck mit gebogenen Ober- und Unterkanten erstellen?

Verbesserung des Sechsecks mit gekrümmten Ober- und Unterkanten

Um das Problem der Erstellung eines vollständig gekrümmten Sechsecks mit CSS zu lösen, schauen wir uns den Code an und verstehen, wie man ihn ändert es, um den gewünschten Effekt zu erzielen:

.hex {
  position: relative;
  margin: 1em auto;
  width: 10em;
  height: 17.32em;
  border-radius: 1em / 0.5em;  <!-- Border radius modification -->
  background: orange;
  transition: opacity .5s;
}

Die entscheidende Änderung in diesem Code ist die Änderung der Eigenschaft border-radius. Ursprünglich hatte das Sechseck einen Kreisradius von 1 cm, der sowohl auf die Breite als auch auf die Höhe angewendet wurde. Indem wir es auf 1em / 0,5em ändern, erzeugen wir effektiv einen elliptischen Randradius. Dieser verlängerte Radius ermöglicht die Krümmung der oberen und unteren Kanten, während die Breite des Halbkreises konstant bleibt.

Erklärung:

Um die Bedeutung von zu verstehen Betrachten Sie für diese Anpassung einen Kreis und eine Ellipse. Ein Kreis hat in allen Richtungen einen einheitlichen Radius, während eine Ellipse entlang ihrer verschiedenen Achsen unterschiedliche Radien hat. Indem wir den Randradius als „1em / 0,5em“ angeben, definieren wir eine Ellipse, deren horizontaler Radius 1em (die Breite des Sechsecks) und deren vertikaler Radius 0,5em (die halbe Höhe des Sechsecks) beträgt. Dadurch entstehen die gekrümmten Kanten oben und unten am Sechseck.

Anderes CSS:

Die zusätzlichen CSS-Elemente erzeugen zwei Pseudoelemente, :before und : danach, die absolut innerhalb des Sechsecks positioniert sind. Sie übernehmen die Breite, Höhe, den Randradius und den Hintergrund des Sechsecks und erzeugen so zwei überlappende Sechsecke, die um 60 Grad in entgegengesetzte Richtungen gedreht sind. Diese gedrehten Sechsecke erzeugen die Illusion einer glatten und kontinuierlichen Kurve entlang aller Kanten.

Durch die Implementierung dieser Änderungen können Sie ein Sechseck mit vollständig gekrümmten Kanten erreichen, was zu einer optisch ansprechenderen und ästhetisch ansprechenderen Form führt.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS ein Sechseck mit gebogenen Ober- und Unterkanten erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!