CSS shapes

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

Die Spezifikation definiert mehrere Möglichkeiten zur Erstellung von Formen. Inhalte können um oder innerhalb einer Form herum angeordnet werden, anstatt der Standardrechteckform des Box-Elements zu folgen.

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

CSS-Formen in Aktion

Das folgende Beispiel zeigt ein Bild, das nach links gefloatet wurde, und die shape-outside-Eigenschaft mit einem Wert von circle(50%) angewendet wurde. Dies erzeugt eine Kreisform, und der Inhalt, der den Float umfließt, umfließt nun diese Form. Dies verändert die Länge der Zeilenboxen des umfließenden Textes. Sie können auf "Play" klicken, um den Code im MDN Playground zu bearbeiten.

Referenz

Eigenschaften

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

Datentypen

Funktionen

Begriffe

Leitfäden

Overview of shapes

Definieren von Grundformen mit den Eigenschaften shape-margin und clip-path, und Debuggen von Grundformen mit Entwickler-Tools.

Shapes from box values

Verwenden von border-radius-Krümmungen und CSS-Box-Modellwerten, um Formen zu erstellen.

Basic shapes with shape-outside

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

Shapes from images

Erstellen von Formen aus halbtransparenten Bilddateien und CSS-Gradienten.

Verwandte Konzepte

Spezifikationen

Specification
CSS Shapes Module Level 1
CSS Shapes Module Level 2

Siehe auch