CSS shape-outside — Texte um Formen fließen lassen

1. Warum Textfluss um Formen wichtig ist

Klassisches Printdesign lebt von Textfluss um Bilder, Illustrationen und Schmuckelemente — eine geschwungene Konturlinie um ein Porträtfoto, ein Textblock, der einem diagonalen Banner folgt, ein Pull-Quote, um das der Fließtext herumläuft. Im Web blieb das lange ein Wunsch: CSS konnte Text nur an rechtwinkligen Boxen vorbeifließen lassen. Das Ergebnis waren meist blockartige, wenig ansprechende Layouts, die im Vergleich zu gedruckten Medien stark zurückblieben. CSS shape-outside schließt diese Lücke und bringt echten geometrischen Textfluss ins Webdesign.

Die Eigenschaft shape-outside ist Teil der CSS Shapes Module Level 1 Spezifikation und wird von allen modernen Browsern unterstützt. Sie definiert eine Form, um die der umgebende Fließtext herumläuft. Dabei ist wichtig zu verstehen: shape-outside verändert nicht die visuelle Darstellung des Floats selbst — das übernimmt clip-path oder ein anderes Styling. shape-outside beeinflusst ausschließlich, wie anliegende Inline-Inhalte um das gefloatete Element herumfließen. Diese Trennung von Form und Aussehen ist eines der designorientierteren Konzepte in CSS.

2. Float als Voraussetzung für shape-outside

CSS shape-outside funktioniert ausschließlich in Verbindung mit gefloateten Elementen. Das ist eine harte technische Einschränkung der Spezifikation: Ein Element muss float: left oder float: right haben, damit shape-outside wirkt. Ohne Float ignorieren Browser die shape-outside-Eigenschaft. Das macht Float — das im Zeitalter von Flexbox und Grid oft als veraltet gilt — für diesen spezifischen Anwendungsfall wieder relevant.

Float-Elemente mit shape-outside benötigen außerdem explizite Dimensionen: width und height müssen gesetzt sein, damit die Shape-Funktionen einen Referenzrahmen haben. Ohne Dimensionen funktionieren geometrische Shape-Funktionen wie circle() und polygon() nicht korrekt. Der Content-Bereich um das Float herum muss ausreichend Platz haben, damit der Textfluss sichtbar wird — wenn der Container zu schmal ist, sieht man keinen Unterschied zu einem einfachen Float. Ein häufiger Aufbau: Float-Element links oder rechts, Fließtext in einem <p>-Block ohne Float, der den gefloateten Bereich umfließt.

/* shape-outside requires float — these are the essential rules */
.float-shape {
  float: left;                  /* Required — no shape-outside without float */
  width: 250px;                 /* Required — defines the coordinate space */
  height: 250px;                /* Required for most shape functions */
  margin-inline-end: 1.5rem;   /* Space between shape and following content */
  shape-outside: circle(50%);  /* Text flows around a circle */
  clip-path: circle(50%);      /* Visually clip the element to circle too */
}

/* Without clip-path: shape-outside applies to text flow only */
/* The element itself still looks like a rectangle */

.float-shape-right {
  float: right;
  width: 200px;
  height: 300px;
  shape-outside: ellipse(50% 60% at 50% 50%);
  shape-margin: 1rem;  /* Extra space between shape outline and text */
}

/* Clearfix for the container — prevent collapse */
.text-wrap-container::after {
  content: "";
  display: table;
  clear: both;
}

3. shape-outside mit circle()

Die einfachste und häufigste Shape-Funktion ist circle(). Die vollständige Syntax lautet circle(<radius> at <cx> <cy>). Alle Parameter sind optional: circle(50%) erzeugt einen Kreis mit 50% des kürzeren Maßes des Elements, zentriert. Der Radius kann in absoluten Einheiten (px, em, rem) oder als Prozentwert angegeben werden. Prozentwerte beziehen sich auf die hypothetische Länge der Diagonale des Elements geteilt durch die Wurzel aus 2.

Die Positionsangabe at <cx> <cy> verschiebt den Mittelpunkt des Kreises. circle(50% at 0% 50%) erzeugt einen Kreis mit dem Mittelpunkt am linken Rand des Elements — ein Halbkreis-Effekt, der Text in eine Kurve einlädt. In Kombination mit clip-path: circle(50%) am selben Element wird das Element visuell als Kreis dargestellt und der Text fließt um die kreisförmige Silhouette. Das ist das typische Muster für runde Profilbilder mit CSS shape-outside, das in redaktionellen Layouts und Autorenboxen häufig eingesetzt wird.

/* shape-outside circle() — author portrait with text wrap */
.author-portrait {
  float: left;
  width: 180px;
  height: 180px;
  shape-outside: circle(50%);
  clip-path: circle(50%);   /* Visually matches the shape */
  shape-margin: 1.25rem;
  margin-block-end: 0.5rem;
  object-fit: cover;        /* For <img> elements */
}

/* Half-circle variant — text wraps around the curved side only */
.hero-image-left {
  float: left;
  width: 300px;
  height: 400px;
  shape-outside: circle(55% at 100% 50%);
  /* Circle centered at right edge — creates concave text boundary */
  clip-path: inset(0 0 0 0 round 0 50% 50% 0);
}

/* Decorative circle that pushes text into a column */
.pull-quote-ornament {
  float: right;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, #7c3aed, #4a1d96);
  shape-outside: circle(60px at center);
  shape-margin: 1.5rem;
  border-radius: 50%;
}

4. shape-outside mit ellipse()

Die Funktion ellipse() in CSS shape-outside erweitert circle() um eine zweite Radiusachse: ellipse(<rx> <ry> at <cx> <cy>). Der erste Radius rx gibt die horizontale Ausdehnung an, der zweite ry die vertikale. Damit lassen sich ovale Formen erzeugen, die für verschiedene Bildinhalte passender sind als ein perfekter Kreis. Ein Hochformatfoto wirkt natürlicher mit einer vertikal gestreckten Ellipse, ein Querformatbild eher mit einer horizontal gedehnten Form.

Besonders interessant ist ellipse() für dekorative Elemente in editorialen Layouts. Eine Illustration in einem Nachrichtenblog, ein Produktfoto in einem Magazinstil-Layout, eine Autorenillustration — all das lässt sich mit ellipse() natürlich in Fließtext einbetten. Die at-Positionierung erlaubt asymmetrische Platzierungen: ellipse(40% 60% at 30% 50%) verschiebt den Schwerpunkt der Ellipse nach links und erzeugt einen Textfluss, der auf einer Seite mehr Platz bietet als auf der anderen. Das ermöglicht dynamische, asymmetrische Layouts mit purem CSS.

5. shape-outside mit polygon()

Die mächtigste Shape-Funktion ist polygon(). Sie nimmt eine Liste von x-y-Koordinatenpaaren und erzeugt ein beliebiges Vieleck. polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%) erzeugt ein Fünfeck. polygon() erlaubt konkave und konvexe Formen gleichermaßen — damit ist prinzipiell jede Silhouette darstellbar, solange sie sich als Polygon annähern lässt. Die Koordinaten können in absoluten Einheiten oder als Prozentwerte des Elementrechtecks angegeben werden.

Ein praktisches Werkzeug für CSS shape-outside polygon() ist der Firefox-Devtools Shape-Path-Editor oder Online-Tools wie der CSS Clip-Path Maker. Diese Werkzeuge erlauben es, Polygon-Punkte visuell zu ziehen und die generierten Koordinaten direkt zu übernehmen. Für polygon()-Formen, die mit einem clip-path kombiniert werden sollen, ist es wichtig, dass beide Funktionen dieselben Koordinaten verwenden — sonst entsteht ein visueller Versatz zwischen der sichtbaren Form des Elements und dem Textfluss um das Element.

/* shape-outside polygon() — complex shapes for editorial layouts */

/* Diamond / rhombus text wrap */
.diamond-ornament {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path:     polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: linear-gradient(135deg, #7c3aed, #c4b5fd);
  shape-margin: 1rem;
}

/* Diagonal cut — text wraps along a diagonal line */
.diagonal-image {
  float: right;
  width: 280px;
  height: 360px;
  shape-outside: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
  /* Text flows around the diagonal cut on the left side */
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
  object-fit: cover;
}

/* Arrow / chevron pointing right */
.chevron-accent {
  float: left;
  width: 80px;
  height: 160px;
  shape-outside: polygon(0% 0%, 100% 50%, 0% 100%);
  clip-path:     polygon(0% 0%, 100% 50%, 0% 100%);
  background: #4a1d96;
  shape-margin: 1.5rem;
}

/* Circular image with transparent areas — image URL version */
.cutout-image {
  float: left;
  width: 250px;
  height: 350px;
  /* shape-image-threshold: 0.5 — alpha > 0.5 = inside shape */
  shape-outside: url('/media/product-cutout.png');
  shape-image-threshold: 0.5;
  shape-margin: 0.75rem;
}

6. shape-outside mit inset()

Die Funktion inset() in CSS shape-outside erzeugt ein Rechteck, das gegenüber den Rändern des Elements eingerückt ist. Die Syntax folgt der Box-Modell-Logik: inset(top right bottom left) mit optionalem round <border-radius>. inset(10px 20px 10px 20px round 15px) erzeugt ein abgerundetes Rechteck, das auf jeder Seite eingerückt ist.

Auf den ersten Blick klingt inset() wenig aufregend — ein Rechteck ist schließlich das Default-Verhalten von Float. Der Nutzen liegt in den Möglichkeiten: Einrücken mit unterschiedlichen Werten erzeugt asymmetrische Textfluss-Bereiche ohne das Element selbst zu verändern. Das round-Argument erzeugt abgerundete Textfluss-Grenzen, die mit einem clip-path: inset(... round ...) am Element selbst kombiniert werden können. inset() ist auch nützlich, wenn man einen großen Abstand auf einer Seite und keinen auf der anderen benötigt — etwa um einen Caption-Text in den Float-Bereich hineinragen zu lassen.

7. shape-margin — Abstand zur Form

Die Eigenschaft shape-margin fügt einen Außenabstand um die definierte Shape herum hinzu, um den der Text dann fließt. Der Unterschied zur regulären CSS-margin-Eigenschaft: margin verschiebt das Element und vergrößert die Float-Box. shape-margin vergrößert nur den geometrischen Textfluss-Abstand, ohne das Element zu verschieben oder die Float-Box zu ändern. Der Effekt ist ein gleichmäßiger Puffer zwischen Textzeilen und der Shape-Grenze.

shape-margin akzeptiert Längenangaben in px, em, rem oder Prozentwerte relativ zur Breite des Containing Blocks. Bei Prozentangaben ändert sich der Abstand mit der Container-Breite, was für responsive Designs nützlich sein kann. Wichtig: shape-margin kann die Shape nicht über die Grenzen der Float-Box hinaus ausdehnen. Wenn der berechnete shape-margin-Wert größer ist als der Abstand zwischen Shape und Float-Box-Rand, wird er auf den verfügbaren Platz begrenzt. Das bedeutet, bei sehr kleinen Float-Boxen kann shape-margin keinen Effekt haben.

8. Textfluss um Bildformen mit shape-image-threshold

Eine besonders mächtige Fähigkeit von CSS shape-outside ist die Möglichkeit, eine Bild-URL als Shape zu verwenden. Mit shape-outside: url('bild.png') extrahiert der Browser die Alpha-Kanal-Informationen des Bildes und berechnet die Shape aus dem nicht-transparenten Bereich. shape-image-threshold steuert, ab welchem Alpha-Wert ein Pixel als „innerhalb der Shape" gilt: shape-image-threshold: 0.5 bedeutet, Pixel mit mehr als 50% Deckkraft definieren die Shape-Grenze.

Damit lassen sich aufwändige Freisteller-Bilder direkt als Textfluss-Grenzen nutzen — ein Feature, das früher ausschließlich in Desktop-Publishing-Software verfügbar war. Ein Produktfoto mit transparentem Hintergrund, eine Silhouette, eine illustrierte Figur — der Text fließt exakt um die reale Kontur, nicht um ein Begrenzungsrechteck. Die Einschränkung: Das Bild muss CORS-kompatibel geladen werden können. Same-Origin-Bilder funktionieren immer; Cross-Origin-Bilder benötigen korrekte CORS-Header, sonst ignoriert der Browser die shape-outside-Anweisung.

9. shape-outside Formen im Vergleich

Die vier Shape-Funktionen von CSS shape-outside decken unterschiedliche Anwendungsfälle ab. Die Wahl zwischen ihnen hängt von der gewünschten Textfluss-Geometrie und der Art des Float-Elements ab.

In der Praxis empfiehlt sich folgende Faustregel: circle() für alle runden Bilder und Ornamente — schnell, lesbar, wartbar. ellipse() für Hochformat-Freisteller. polygon() für dekorative geschwungene oder diagonale Elemente, wobei ein Shape-Editor hilft. inset() für subtile Anpassungen an rechteckigen Floats mit Abrundungen. Die url()-Variante ist für echte Freisteller-Produktbilder — wenn CORS und Performance passen — das mächtigste Werkzeug, erfordert aber sorgfältige Bildoptimierung.

10. Zusammenfassung

CSS shape-outside ist eine gut unterstützte, aber wenig genutzte CSS-Eigenschaft, die echten Textfluss um geometrische Formen ermöglicht. Die Kernvoraussetzung ist Float — ohne float: left oder float: right funktioniert shape-outside nicht. Die Shape-Funktionen circle(), ellipse(), polygon() und inset() decken das gesamte Spektrum von runden Profilbildern über diagonale Schnitte bis zu beliebigen Vielecken ab. shape-margin ergänzt einen Puffer um die Form, ohne das Element zu verschieben.

Für editorialisches Webdesign — Artikel-Seiten, Landing Pages, Produktbeschreibungen — bietet CSS shape-outside Designmöglichkeiten, die bisher nur in Printmedien möglich waren. Kombiniern mit clip-path für die visuelle Darstellung und shape-image-threshold für Freisteller-Bilder entsteht ein vollständiges System für kurvenreiche, dynamische Layouts ohne JavaScript. Browser-Support ist ausgezeichnet — alle modernen Browser unterstützen CSS shape-outside vollständig.

11. FAQ: CSS shape-outside