CSS-Formen

Das CSS-Modul für Formen 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 oder als Inhaltsbereich eines Elements festgelegt werden.

Die Spezifikation definiert mehrere Möglichkeiten zur Erstellung von Formen. Inhalt kann um oder innerhalb einer Form herum angeordnet werden, anstatt der Standard-Rechteckform 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 verwenden, einschließlich CSS-Bewegungspfad und CSS-Maskierung.

CSS-Formen in Aktion

Das folgende Beispiel zeigt ein Bild, das links fließt, und die shape-outside-Eigenschaft, die mit einem Wert von circle(50%) angewendet wurde. Dies erzeugt eine Kreisform, und der Inhalt, der das Fließobjekt umgibt, umschließt nun diese Form. Dies ändert die Länge der Linienboxen des umschließ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%);
}

<basic-shape>

Funktionen

Begriffe

Bezugsbox

Leitfäden

Überblick über Formen: Definieren von Grundformen mit den shape-margin- und clip-path-Eigenschaften und Debuggen von Grundformen mit Entwicklerwerkzeugen.
Formen aus Box-Werten: Verwenden von border-radius-Krümmungen und CSS-Boxmodell-Werten zum Erstellen von Formen.
Grundformen mit shape-outside: Erstellen von Rechtecken, Kreisen, Ellipsen und Polygonen mit CSS-Formen, der Bezugsbox und der shape-outside-Eigenschaft.
Formen aus Bildern: Erstellen von Formen aus halbtransparenten Bilddateien und CSS-Verläufen.

Spezifikationen

Specification
CSS Shapes Module Level 1
CSS Shapes Module Level 2

Siehe auch

CSS-Formen-Ressourcen
CSS Shapes 101 über alistapart.com (2014)
Erstellen nicht-rechteckiger Layouts mit CSS-Formen über sarasoueidan.com (2013)
Anleitung zur Nutzung von CSS-Formen im Webdesign über tutsplus.com (2016)
Anleitung zum Einstieg in CSS-Formen über webdesignerdepot.com (2015)
Bearbeiten von CSS-Formen mit dem Shape Path Editor über mozilla.org (2018) (Video)

CSS-Formen

CSS-Formen in Aktion

Referenz

Eigenschaften

Datentypen