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.

<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

Referenzbox

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.

Spezifikationen

Specification
CSS Shapes Module Level 1
CSS Shapes Module Level 2

Siehe auch

CSS Shapes resources
CSS Shapes 101 via alistapart.com (2014)
Creating non-rectangular layouts with CSS Shapes via sarasoueidan.com (2013)
How to use CSS Shapes in your web design via tutsplus.com (2016)
How to get started with CSS Shapes via webdesignerdepot.com (2015)
Edit CSS shapes with the shape path editor via mozilla.org (2018) (Video)

CSS shapes

CSS-Formen in Aktion

Referenz

Eigenschaften

Datentypen