CSS shapes

Das CSS shapes 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 Ausschlüsse angewendet oder verwendet werden, um den Inhaltsbereich eines Elements zu spezifizieren.

Die Spezifikation definiert mehrere Möglichkeiten, Formen zu erstellen. Inhalte können um eine Form herum oder innerhalb einer Form angeordnet werden, anstatt der Standard-Rechteckform des Elemente-Boxes 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 nutzen, einschließlich CSS Bewegungsbahn und CSS Maskierung.

CSS shapes in der Praxis

Das folgende Beispiel zeigt ein Bild, das nach links schwebt, und die shape-outside Eigenschaft mit einem Wert von circle(50%) angewendet. Dies erzeugt eine Kreisform, und der um den Fließbereich gewickelte Inhalt wird nun um diese Form herum arrangiert. Dies ändert die Länge der Zeilenboxen des umwickelten 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

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