CSS-Formen

Das CSS-Formen-Modul beschreibt geometrische Formen. Es definiert auch CSS-Eigenschaften, die die Formen nutzen können, um die Geometrie des Umflussbereichs eines Elements zu steuern; dieser Bereich kann dann auf Exklusionen 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 herumfließen, anstatt der Standardrechteckform des Elementkastens zu folgen.

Formen definieren Geometrien, die als CSS-Werte genutzt werden können. Dieses Modul bietet Funktionen zum Erstellen von Ellipsen, Polygonen und beliebigen Geometrien. Andere CSS-Module können Formen nutzen, die in dieser Spezifikation definiert sind, einschließlich CSS-Bewegungspfad und CSS-Maskierung.

CSS-Formen in Aktion

Das folgende Beispiel zeigt ein Bild, das links gefloatet ist und der shape-outside-Eigenschaft mit einem Wert von circle(50%) angewendet wurde. Dies erzeugt eine Kreisform, und der den Float umfließende Inhalt fließt nun um diese Form. Dies verändert die Länge der Linienboxen des umfließenden Texts. 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%);
}

<basic-shape>

Funktionen

Begriffe

Referenzkasten

Leitfäden

Überblick über Formen: Definieren von Grundformen mit den Eigenschaften shape-margin und clip-path und Debuggen von Grundformen mit Entwicklertools.
Formen aus Kastenwerten: Verwendung von border-radius-Krümmungen und CSS-Kastenmodellwerten zur Erstellung von Formen.
Grundformen mit shape-outside: Erstellen von Rechtecken, Kreisen, Ellipsen und Polygonen mit CSS-Formen, dem Referenzkasten und der Eigenschaft shape-outside.
Formen aus Bildern: Formen aus halbtransparenten Bilddateien und CSS-Verläufen erstellen.