CSS-Formen

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

Die Spezifikation definiert mehrere Möglichkeiten zur Erstellung von Formen. Inhalte können um eine Form herum oder innerhalb einer Form angeordnet werden, anstatt der standardmäßigen rechteckigen Form des Element-Boxmodells zu folgen.

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

CSS-Formen in Aktion

Das folgende Beispiel zeigt ein Bild, das nach links gefloatet wurde, wobei die Eigenschaft shape-outside mit einem Wert von circle(50%) angewendet wurde. Dies erzeugt eine Kreisform, und der den Float umgebende Inhalt wird nun um diese Form herum angeordnet. Dies ändert die Länge der Zeilenboxen des umgebenden Textes.

html
<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>
css
body {
  font: 1.2em / 1.5 sans-serif;
}
img {
  float: left;
  shape-outside: circle(50%);
}

Referenz

Eigenschaften

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

Datentypen

Funktionen

Begriffe

Leitfäden

Übersicht über Formen

Definition grundlegender Formen mit den Eigenschaften shape-margin und clip-path und Debugging grundlegender Formen mit Entwicklerwerkzeugen.

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 Eigenschaft shape-outside.

Formen aus Bildern

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

Verwandte Konzepte

CSS motion path Modul

CSS masking Modul

CSS hintergründe und rahmen Modul

CSS-Boxmodell Modul

Spezifikationen

Specification
CSS Shapes Module Level 1
CSS Shapes Module Level 2

Siehe auch