CSS shape(): responsive Formen ohne SVG?

CSS shape(): beliebige Formen, die jetzt responsiv mitwachsen

Michael Dobler

Autor Dr. Web

12. August 2026

2 Min. Lesezeit

Die CSS-Funktion shape() beschneidet Elemente jetzt responsiv entlang frei gezeichneter Pfade. Seit Februar 2026 unterstützen alle großen Browser-Engines die Funktion, damit gehört der SVG-Umweg für viele geschwungene Zuschnitte der Vergangenheit an.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Ein Bild in eine Wellen- oder Bogenform zu schneiden, verlangte bisher einen starren SVG-Pfad oder eine Neuberechnung der Koordinaten per JavaScript bei jedem Umbruch. shape() verlegt diese Arbeit dorthin, wo das Layout ohnehin entsteht, ins CSS.

Das Wichtigste in Kürze

shape() definiert für clip-path beliebige Pfade aus CSS-Befehlen wie line, curve und arc, mit echten CSS-Einheiten.
Anders als das ältere path() versteht shape() Prozentwerte, calc() und CSS-Variablen, der Zuschnitt wächst dadurch mit dem Container.
Seit Firefox 148 im Februar 2026 unterstützen alle großen Engines die Funktion, Chrome, Edge und Safari schon seit April 2025.
clip-path beschneidet nur die Darstellung, nicht die Box: Inhalt außerhalb der Form bleibt im Layout und für Screenreader erhalten.

Was macht shape() anders als der alte SVG-Pfad?

Geschwungene Acrylschablone mit Papierschild „ohne SVG“ und Gravur „Handarbeit“ — Die path()-Funktion für krumme Zuschnitte akzeptiert nur SVG-Pfad-Strings mit Pixelzahlen, nicht aber Prozentwerte oder CSS-Funktionen, was die Flexibilität einschränkt

Das bisherige Werkzeug für krumme Zuschnitte hieß path(). Diese Funktion erwartet einen SVG-Pfad-String, eine eigene kleine Sprache aus Buchstaben und reinen Pixelzahlen. Prozentwerte, calc() oder Variablen kennt path() nicht, deshalb blieb ein so beschnittenes Element auf seine ursprüngliche Pixelgröße festgenagelt.^[1]

Echte CSS-Einheiten sind der Unterschied. shape() nutzt dieselben Befehle wie SVG, also from, line, curve, arc und close, füttert sie aber mit jeder CSS-Einheit. Ein Rand lässt sich fix in Pixeln halten, während der Rest über calc(100% – 20px) in Prozent mitskaliert. Genau diese Mischung war mit path() nicht machbar.

Warum ist das mehr als eine Bequemlichkeit?

Der wegfallende Umweg zählt, nicht die neue Syntax. Bisher lösten Teams responsive Kurvenschnitte über eine SVG-Maske im Markup oder über ein Skript, das die Form bei jeder Größenänderung neu setzte. Beides bedeutet zusätzliche Dateien, zusätzliche Abhängigkeiten und eine zweite Stelle, an der etwas bricht.

Damit reiht sich shape() unter die Funktionen ein, die CSS zuletzt aus JavaScript zurückgeholt hat, vom nativen Masonry-Layout bis zu Scroll-Animationen ohne Bibliothek. Für Frontend-Teams schrumpft mit jedem dieser Schritte der Werkzeugkasten, den sie selbst pflegen müssen.

shape() nimmt dem Frontend eine ganze Werkzeugkiste ab. Wo Teams bisher SVG-Masken pflegten und bei jedem Umbruch nachrechneten, genügt jetzt eine Zeile CSS, die von allein mitwächst.
— Markus Seyfferth, Chefredakteur Dr. Web

Feb 2026

shape() ist Baseline „Newly available“, alle großen Engines ziehen mit

clip-path

shape() beschneidet Elemente entlang frei definierter Pfade

%, calc()

Pfad-Koordinaten in echten CSS-Einheiten statt im starren px-String

curve + arc

Kurven und Bögen skalieren jetzt responsiv mit dem Layout

path() gegen shape()

path() (bisher)

SVG-Pfad-String als eigene Syntax
nur Pixelwerte, keine Prozent
kein calc(), keine Variablen
Form bleibt auf ihre Startgröße fixiert

shape() (neu)

lesbare CSS-Befehle wie line, curve, arc
jede CSS-Einheit, auch Prozent
calc() und CSS-Variablen erlaubt
Zuschnitt wächst mit dem Container

Ab wann lohnt sich der Einsatz im Projekt?

Für neue Projekte ist der Zeitpunkt gekommen. Mit dem Baseline-Status „Newly available“ seit Februar 2026 unterstützen aktuelle Versionen von Chrome, Edge, Safari und Firefox die Funktion.^[2] Für ältere Browser sichern Sie den Zuschnitt mit einer @supports-Abfrage ab und hinterlegen als Rückfall eine rechteckige oder mit polygon() gezeichnete Form.

Zwei Punkte gehören auf die Checkliste. Der eine betrifft die Barrierefreiheit: clip-path blendet nur optisch aus, der beschnittene Bereich bleibt anklickbar und für Screenreader lesbar, sichtbare Bedienelemente gehören deshalb nie unter den unsichtbaren Rand. Der andere ist der Blick auf bestehende SVG-Masken, die sich jetzt durch eine einzige CSS-Zeile ersetzen lassen. Wie stark solche nativen Bausteine den Browser gerade umbauen, zeigt der Rückblick auf die Webdesign-Trends 2026 ebenso wie die neue automatische Textkontrastfarbe.