Kreativ werden mit CSS-Shape-Funktionen

Sie möchten einen dekorativen Pfeil erstellen, der Ihr Hero-Image beschneidet. Sie greifen zu clip-path: path(), schreiben die SVG-Koordinaten aus, und es funktioniert – bis sich die Größe des Containers ändert. Der Pfeil bleibt in seinen ursprünglichen Pixelabmessungen fixiert, während sich alles andere skaliert. Dies ist die zentrale Einschränkung, die die CSS-Funktion shape() löst.

Was die CSS-Funktion shape() tatsächlich leistet

Die Funktion shape() ist eine CSS-native Methode zur Definition komplexer Formen unter Verwendung vertrauter CSS-Einheiten wie Prozentangaben, calc() und Container Query Units. Im Gegensatz zu path(), das SVG-Syntax verwendet und alle Werte als Pixel interpretiert, ermöglicht shape() den Aufbau responsiver CSS-Formen, die sich an ihr umgebendes Element anpassen.

Hier ist der entscheidende Unterschied. Mit path():

clip-path: path("M0 0 L 100 0 L 150 50 L 100 100 L 0 100 z");

Diese Zahlen sind feste Pixel. Ändern Sie die Elementgröße, und die Form behält dieselbe Größe bei.

Mit shape():

clip-path: shape(from 0% 0%, 
  line to calc(100% - 50px) 0%, 
  line to 100% 50%, 
  line to calc(100% - 50px) 100%, 
  line to 0% 100%, 
  close);

Jetzt skaliert die Form mit dem Element. Prozentangaben werden relativ zu den Elementabmessungen aufgelöst. Sie können feste Werte mit relativen mischen und so Formen erstellen, die Proportionen beibehalten oder bestimmte Winkel bewahren, während sich die Containergröße ändert.

Wo shape() funktioniert: clip-path und offset-path

Die CSS-Funktion shape() wird derzeit auf zwei Properties mit unterschiedlichen Zwecken angewendet.

CSS clip-path shape() definiert, welche Teile eines Elements sichtbar bleiben. Alles außerhalb der Form wird abgeschnitten. Dies ist rein visuell – das Box-Modell des Elements bleibt rechteckig, und Layout-Berechnungen ignorieren das Clipping vollständig.

CSS offset-path shape() definiert einen Bewegungspfad für Animationen. In Kombination mit offset-distance können Sie Elemente entlang benutzerdefinierter Kurven und Linien bewegen. Die Form beschreibt die Trajektorie, nicht die Sichtbarkeit.

Diese unterscheiden sich grundlegend von shape-outside, das den Textfluss um gefloatete Elemente beeinflusst. Diese Eigenschaft gehört zu CSS Shapes Level 1 und unterstützt derzeit nicht die Funktion shape() – nur Grundformen wie circle(), ellipse() und polygon().

Browser-Unterstützung: Die Realität Ende 2025

Die Funktion shape() wurde in Safari 18.4 ausgeliefert und ist in Chromium-basierten Browsern gelandet. Firefox unterstützt sie noch nicht. Das bedeutet, Sie können sie nicht als Basis-CSS behandeln.

Feature Detection ist unkompliziert:

@supports (clip-path: shape(from 0% 0%, line to 100% 0%)) {
  /* shape() wird unterstützt */
}

Für den Produktiveinsatz ist Progressive Enhancement unerlässlich. Beginnen Sie mit einem polygon()-Fallback, das Ihre Form ohne Kurven annähert, und schichten Sie dann die shape()-Version für unterstützende Browser darüber:

.element {
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
  clip-path: shape(from 0% 0%, 
    line to 80% 0%, 
    line to 100% 50%, 
    line to 80% 100%, 
    line to 0% 100%, 
    close);
}

Die zweite Deklaration überschreibt die erste nur in Browsern, die sie verstehen.

Kreative Anwendungsfälle, die es zu erkunden lohnt

Dekoratives Clipping wird praktischer, wenn Formen auf das Layout reagieren. Ein diagonaler Abschnittsteiler kann seinen Winkel unabhängig von der Viewport-Breite beibehalten. Eine gekerbte Kartenecke kann proportional bleiben, wenn sich die Kartengrößen in einem Grid ändern.

Responsive Masken für Bilder profitieren vom Mischen von Einheiten. Halten Sie einen gekrümmten Ausschnitt bei einem festen Radius, während sich die Gesamtform mit dem Bildcontainer skaliert.

Bewegungspfade gewinnen an Flexibilität, wenn Sie Wegpunkte in Prozentangaben ausdrücken können. Ein Element kann um das Zentrum eines Containers kreisen, unabhängig von dessen tatsächlichen Abmessungen.

Die wahre Stärke zeigt sich, wenn Sie shape() mit CSS Custom Properties und Container Query Units kombinieren. Eine einzelne Formdefinition kann sich an mehrere Kontexte anpassen, ohne JavaScript-Neuberechnungen.

Fazit

Die CSS-Funktion shape() löst ein spezifisches Problem: komplexe Beschneidungspfade und Bewegungspfade responsive zu gestalten, ohne CSS zu verlassen. Sie verwendet native Syntax, unterstützt calc() und funktioniert mit prozentbasierten Koordinaten.

Sie ersetzt nicht path() für Formen mit festen Abmessungen, bei denen Pixelgenauigkeit wichtig ist. Sie funktioniert nicht mit shape-outside für Textumfluss. Und sie erfordert Fallbacks, bis Firefox-Unterstützung verfügbar ist.

Für kreative visuelle Effekte, die skalieren müssen, ist shape() das Werkzeug, das gefehlt hat. Verwenden Sie es mit klaren Fallback-Strategien, und Ihr dekoratives Clipping wird sich endlich wie der Rest Ihres responsiven Layouts verhalten.

Häufig gestellte Fragen

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..