CSS shape-outside

Die CSS-Eigenschaft shape-outside ermöglicht es, dass Text nicht nur rechteckig um ein Element herumfließt, sondern auch verschiedene Formen wie Kreise, Ellipsen oder Polygone folgt. Dies ist besonders nützlich für kreatives Layout und auffällige Designs.

Verwendung einer Kreisform

Mit der Funktion circle() können wir einem schwebenden Element eine Kreisform geben, um die der Text automatisch fließt. Dazu wird oft auch clip-path verwendet, damit die Form visuell sichtbar ist.

Dieses Beispiel zeigt, wie sich der Text um ein kreisförmiges Bild anpasst.

Verwendung einer Polygonform

Mit der Funktion polygon() können wir beliebige Formen durch die Angabe von Koordinaten definieren. Dies ermöglicht, dass der Text um ungewöhnliche, individuelle Formen herumfließt.

In diesem Beispiel fließt der Text um eine Polygonform, die mit der Funktion polygon() definiert wurde.

Tipps zur Verwendung von shape-outside

Einige Tipps für die effektive Verwendung von shape-outside:

• Verwende immer clip-path zusammen mit shape-outside, damit Form und Textfluss übereinstimmen.
• float ist für shape-outside erforderlich, daher muss das Element immer floaten.
• Experimentiere mit verschiedenen Formen (Kreis, Ellipse, Polygon), um abwechslungsreiche Layouts zu erstellen.