CSS-Formen

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

Die Spezifikation definiert mehrere Möglichkeiten, Formen zu erstellen. Inhalte können um oder innerhalb einer Form fließen, anstatt der standardmäßigen rechteckigen Form des Box-Modells des Elements zu folgen.

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

CSS-Formen in Aktion

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

<div class="box">
 <img
 alt="A hot air balloon"
 src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" />
 <p>
 One November night in the year 1782, so the story runs, two brothers sat
 over their winter fire in the little French town of Annonay, watching the
 grey smoke-wreaths from the hearth curl up the wide chimney. Their names
 were Stephen and Joseph Montgolfier, they were papermakers by trade, and
 were noted as possessing thoughtful minds and a deep interest in all
 scientific knowledge and new discovery. Before that night—a memorable night,
 as it was to prove—hundreds of millions of people had watched the rising
 smoke-wreaths of their fires without drawing any special inspiration from
 the fact.
 </p>
</div>

body {
 font: 1.2em / 1.5 sans-serif;
}
img {
 float: left;
 shape-outside: circle(50%);
}

Referenz

Eigenschaften

• shape-image-threshold
• shape-margin
• shape-outside

Das CSS-Formen-Modul führt auch die Eigenschaften shape-inside und shape-padding ein. Derzeit unterstützen keine Browser diese Funktionen.

Datentypen

• <basic-shape>

Funktionen

• circle()
• ellipse()
• inset()
• path()
• polygon()
• rect()
• shape()
• xywh()

Begriffe

• Referenzbox

Leitfäden

Übersicht über Formen

Definieren von Grundformen mit den Eigenschaften shape-margin und clip-path, und Debugging von Grundformen mit Developer Tools.

Formen aus Box-Werten

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

Grundformen mit shape-outside

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

Formen aus Bildern

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

Verwandte Konzepte

CSS motion path Modul

• offset
• offset-anchor
• offset-distance
• offset-path
• offset-position
• offset-rotate
• ray() Funktion

CSS masking Modul

• clip
• clip-path
• clip-rule
• mask
• mask-origin
• mask-position

CSS Hintergründe und Rahmen Modul

• border-radius Kurzform

CSS Box-Modell Modul

• <box-edge> Datentyp

Spezifikationen

Siehe auch

• Formengenerator
• CSS-Formen-Ressourcen
• CSS Shapes 101 via alistapart.com (2014)
• Erstellen von nicht-rechteckigen Layouts mit CSS-Formen via sarasoueidan.com (2013)
• Anleitung zur Verwendung von CSS-Formen im Webdesign via tutsplus.com (2016)
• Bearbeiten von CSS-Formen mit dem Formpfad-Editor via mozilla.org (2018) (Video)