CSS Shapes – Form von Text umfließen lassen

Das Ende der eckigen Blöcke

Die klassischen Satzprogramme lassen ein Bild oder eine Form vom Text umfließen. CSS war hingegen bislang auf Kästen und gerade Linien beschränkt, wenn wir mal von border-radius absehen und komplizierten CSS-Eigenschaften für Dreiecke und Sterne.

An CSS Shapes passt sich der Text an und lockert das Kästchen-für-Kästchen-Layout der Webseite auf. CSS shape-outside legt fünf Varianten von Formen vor.

<div class="buddah">
	<img class="circled" loading="lazy" src="buddah-300.webp" …>
	<p> … </p>
	<p> … </p>
</div>

.buddah {
	display: flow-root; /** display:flow-root – float am Ende des Blocks beenden **/
}
.circled {
	shape-outside: circle();
	clip-path: circle();
	float: left;
}

clip-path: circle() beschneidet das Bild auf einen Kreis, shape-outside: circle() bildet die Form, an die sich der folgende Text anpasst.

shape-outside Optionen

Für shape-outside gelten dieselben Optionen wie für CSS clip-path:

circle (radius at x y)

ein Kreis mit Radius und Zentrum bei x,y

ellipse (radiusX radiusY at x y)

Bildet eine Ellipse mit radiusX und radiusY und Zentrum bei x,y

inset (top right bottom left round topleft topright bottomright bottomleft)

Ein Rechteck, optional mit abgerundeten Ecken, das einen Auszug bildet

polygon (x1 y1, x2 y2, … )

ein Polygon (Vieleck) mit beliebig vielen Punkten x y

url()

Alpha-Kanal einer Bitmap-Grafik (PNG oder WebP) oder SVG-Pad aus Inline-SVG.

CSS shapes wird von allen immergrünen Browsern unterstützt, die Ausnahme ist IE11 (Überraschung!).

shape-outside circle / ellipse

shape-outside versieht Circle und Ellipse mit Einstellungen für den Radius und die Position. Per Vorgabe ist der Radius r bei 50% der angegebenen Breite. Dann sitzt der Text direkt entlang der Kontur und shape-margin legt den Abstand zwischen Text und Form fest.

                        +-- Radius
                        |
shape-outside: circle (50% at 50% 50%);
                               |   |
                               |   +-- vertikale Position
       horizontale Position –––+

legt den Radius und die Position des Kreises fest.

.half {
   width: 8em; height: 8em; 
   border-radius: 50%; float: left;
   shape-outside: circle(50% at 0 50%);
}

Ellipsen oder Ovale haben unterschiedliche Werte für Höhe und Breite, also zwei Radien r_x und r_y.

.ellipse {
   shape-outside: ellipse();
}

shape-outside: polygon()

Eine Polygon-Form besteht aus beliebig vielen Punktepaaren xy, die durch ein Komma voneinander getrennt sind.

Reprehenderit, enim eiusmod high life mainus goethe ad squid. Tristest sachsendomus high noon officia, non vegan maiscolbus dolor. Flooter boot quinoa rasant eiusmod. Tweetus malis in lorem ipsum toto millium mallies. Engatis inherit cascade shape outside, nollo englesis collarandis inno letteris maximus.

Reprehenderit, enim eiusmod high life mainus goethe ad squid. Trolius sachsendomus high noon officia, non vegan maiscolbus dolor.

Für Polygone hat Firefox ein Werkzeug in den Entwickler-Werkzeugen: Wird das Element mit shape-outside: polygon() in der Konsole markiert, zeigt Firefox ein kleines Polygon-Symbol, dessen Punkte sich in einer Life-Ansicht verschieben lassen, um die Form anzupassen.

.poly {
shape-outside: polygon(0% 0%, 100% 0%, 100% 20%, 100% 40%, 100% 60%, 100% 80%, 100% 100%, 0% 100%);
}

Polygon in Form bringen und die Werte aus der Konsole kopieren und ins CSS einsetzen.

shape-outside: polygon(0% 0%, 32.8% 14.73%, 92.07% 16.64%, 95.25% 26.07%, 87.18% 39%, 79.7% 67.38%, 56.19% 92.69%, 0% 100%);

Shape mit url-basierter Alpha-Maske

Neben den geometrischen Pfaden zur Beschreibung der umflossenen Form wirkt auch der Alpha-Kanal eines Bildes.

Die Kontur des Texts folgt also nicht einer geometrischen Form wie circle oder polygon, sondern dem durchsichtigen Bereich des Bildes. Zwar werden kann auch GIF mit einem transparenten Hintergrund gespeichert werden, aber der transparente Teil bildet keine Maske, es muss also ein PNG sein.

shape-margin funktioniert nicht immer problemlos, darum beruft sich CSS hier zusätzlich auf ein normeles margin.

.twitter {
      shape-outside: url(twitter.webp);
      shape-margin: 1em;
      margin: 1em;
      float: left;
}

.shapeit::before {
     content: " ";
     float: left;
     width: 95px; height:300px;
     margin-right:10em;
     shape-outside: url(dreieck.webp);
}

Die runde Außenkante ist ein Stil für den Text-Absatz (p), und wirkt durch float auf alle folgenden Elemente, bis die Kontur komplett vom Text überrundet wird oder ein clear folgt.

<p class="shapeit">Für ein URL-basiertes Umfließen …
<p> …