CSS shapes

Das CSS shapes Modul beschreibt geometrische Formen. Es definiert auch CSS-Eigenschaften, die die Formen verwenden können, um die Geometrie des Fließbereichs eines Elements zu steuern; dieser Bereich kann dann auf Ausschlüsse angewendet werden oder den Inhaltsbereich eines Elements angeben.

Die Spezifikation definiert mehrere Möglichkeiten, Formen zu erstellen. Inhalte können um oder innerhalb einer Form herum angeordnet werden, anstatt der Standardrechteckform des Elementkastens zu folgen.

Formen definieren Geometrien, die als CSS-Werte verwendet werden können. Dieses Modul bietet Funktionen zum Erstellen von Ellipsen, Polygonen und beliebigen Geometrien. Andere CSS-Module können die in dieser Spezifikation definierten Formen nutzen, einschließlich CSS motion path und CSS masking.

CSS shapes in Aktion

Das folgende Beispiel zeigt ein Bild, das links geschwebt wurde, und die shape-outside Eigenschaft mit einem Wert von circle(50%) angewendet. Dies erzeugt eine Kreisform, und der Inhalt, der das Schweben umschließt, umgibt nun diese Form. Dies verändert die Länge der umschlossenen Textzeilenboxen.

Referenz

Eigenschaften

Hinweis: Das CSS shapes Modul führt die Eigenschaften shape-inside und shape-padding ein, die noch nicht implementiert sind.

Datentypen

Funktionen

Begriffe

Leitfäden

Überblick über Formen

Definition von grundlegenden Formen mit den Eigenschaften shape-margin und clip-path und Debugging von grundlegenden Formen mit den Entwicklertools.

Formen aus Box-Werten

Verwendung von border-radius Krümmungen und CSS-Boxmodellwerten zur Erstellung von Formen.

Grundlegende Formen mit shape-outside

Erstellen von Rechtecken, Kreisen, Ellipsen und Polygonen mit CSS-Formen, der Referenzbox und der shape-outside Eigenschaft.

Formen aus Bildern

Erstellung von Formen aus halbtransparenten Bilddateien und CSS-Verläufen.

Verwandte Konzepte

Spezifikationen

Specification
CSS Shapes Module Level 1
CSS Shapes Module Level 2

Siehe auch