jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS shape() Funktions-Generator

Generieren Sie CSS shape()-Funktionen fur nicht-rechteckige clip-path- und shape-outside-Formen mit Polygone, Kreisen und Pfaden.

Tool wird geladen...

Was ist CSS shape() Funktions-Generator?

Die CSS shape()-Funktion ist ein neues Shape-Primitiv, das die legacy Shape-Funktionen (polygon(), circle(), ellipse(), path(), inset(), rect()) vereinheitlicht und erweitert. Anders als frühere Shape-Funktionen unterstützt shape() Prozentkoordinaten, die relativ zu den eigenen Abmessungen des Elements sind, nicht nur Pixelkoordinaten. Es unterstützt auch Referenzbox-Schlüsselwörter (margin-box, padding-box, content-box, border-box), die das Koordinatensystem definieren, und mit shape() erstellte Shapes können für flüssige CSS-Übergänge und Animationen zwischen verschiedenen Shape-Typen interpoliert werden.

Kurze Antwort

CSS shape() erzeugt nicht-rechteckige Formen für clip-path und shape-outside mit Prozentkoordinaten relativ zur Elementgröße, Referenzbox-Unterstützung und animierbaren Übergängen zwischen Polygon, Kreis, Ellipse, Pfad und Rechteck. Chrome 139+, Safari 18.2+ (Baseline 2026). Fügen Sie immer eine Fallback-Shape-Funktion für nicht unterstützte Browser hinzu.

Last updated: 2026-06-02

Einschränkungen

  • Die Browserunterstützung ist Stand Mitte 2026 auf Chrome 139+, Edge 139+ und Safari 18.2+ beschränkt. Firefox unterstützt shape() noch nicht, und ältere Browser ignorieren die gesamte Deklaration. Eine Fallback-Shape-Funktion ist für breite Kompatibilität erforderlich.
  • shape() polygon erfordert explizite Einheiten (px oder %) für jeden Koordinatenwert, anders als die legacy polygon()-Funktion, die nackte Zahlen akzeptiert. Dies macht die Syntax ausführlicher und fehleranfälliger bei der Migration von bestehenden polygon()-Deklarationen.
  • Nicht alle Shape-Typen interpolieren sauber miteinander. Während shape() typübergreifende Animation unterstützt, können Übergänge zwischen stark unterschiedlichen Geometrien (z.B. rect zu einem komplexen Pfad) unerwartete Zwischenformen erzeugen. Testen Sie Animationen vor dem Einsatz visuell.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wählen Sie den Shape-Typ: polygon (Liste von Koordinatenpaaren), circle (Mittelpunkt und Radius), ellipse (Mittelpunkt plus x-Radius und y-Radius), path (SVG-Pfad-Daten) oder rect (oben, rechts, unten, links mit optionaler Abrundung).
  2. Wählen Sie die Referenzbox: margin-box, padding-box, content-box oder border-box. Die Referenzbox bestimmt das Koordinatensystem für prozentbasierte Koordinaten.
  3. Konfigurieren Sie die Shape-Koordinaten. Fügen Sie für Polygone Koordinatenpunktpaare hinzu. Setzen Sie für Kreise und Ellipsen die Mittelposition und Radiuswerte. Aktivieren Sie den animationsfreundlichen Modus, um sicherzustellen, dass Shape-Werte kompatible Syntax für CSS-Übergänge verwenden.
  4. Kopieren Sie das generierte shape()-CSS und wenden Sie es auf die clip-path- oder shape-outside-Eigenschaft an. Fügen Sie einen Fallback mit den legacy Shape-Funktionen für Browser hinzu, die shape() noch nicht unterstützen.

Wofür du es nutzen kannst

  • Erstellen Sie nicht-rechteckige Bildmasken für Hero-Bereiche und Featured-Content-Karten mit clip-path und shape() polygon mit Prozentkoordinaten.
  • Umfließen Sie Text um kreisförmige oder elliptische Bilder mit shape-outside und shape() circle sowie padding-box-Referenz für konsistente Abstände.
  • Animieren Sie zwischen einer Polygon- und einer Kreisform bei Hover oder Scroll mit CSS-Übergängen, da shape() die Interpolation zwischen verschiedenen Shape-Typen unterstützt.

Anwendungsfalle

Praxisbeispiele

Beispiel

Animierte Hero-Bildmaske

Eine Landingpage zeigt ein Hero-Bild beim Laden als Polygon beschnitten, das dann beim Scrollen in ein vollständiges Rechteck übergeht. Mit shape() polygon und Prozentkoordinaten animiert clip-path flüssig von einer sechseckigen Form zu einem vollen Rechteck. Geben Sie clip-path: none als Fallback für Browser ohne shape()-Unterstützung an.

Beispiel

Textumfluss um ein kreisförmiges Profilfoto

Eine Blog-Profilseite hat ein kreisförmiges Foto, um das Text fließt. Mit shape-outside: shape() circle at 50% 50% with 50% radius und padding-box-Referenz umfließt der Text das Bild eng. Der prozentbasierte Radius skaliert mit der Bildgröße für responsive Layouts.

Haufige Fehler

  • Pixelkoordinaten in shape() zu verwenden, wenn Prozentkoordinaten responsiver wären - Prozentkoordinaten in shape() passen sich der Elementgröße an, während Pixelkoordinaten bei Größenänderung brechen. Verwenden Sie Prozentwerte, es sei denn, exakte Pixelausrichtung ist erforderlich.
  • Anzunehmen, dass shape() polygon dieselbe kommagetrennte nackte Zahlensyntax wie polygon() verwendet - shape() erfordert explizite Einheiten (px oder %) für jeden Koordinatenwert, was die Syntax ausführlicher macht als die legacy Funktion.
  • shape() ohne Fallback für ältere Browser anzuwenden - shape() wird in Chrome 139+, Edge 139+ und Safari 18.2+ unterstützt, aber nicht in Firefox. Nicht unterstützte Browser ignorieren die gesamte Deklaration. Geben Sie immer eine Fallback-Shape-Deklaration vor der shape()-Regel an.

Überprüfung

  1. Wenden Sie in Chrome 139+ das generierte shape()-CSS auf ein Element mit clip-path an und inspizieren Sie den berechneten Style. Ändern Sie die Viewport-Größe, um zu bestätigen, dass Prozentkoordinaten relativ zur Elementgröße korrekt skalieren.
  2. Fügen Sie einen CSS-Übergang auf clip-path hinzu und wechseln Sie zwischen zwei shape()-Werten (polygon und circle) bei Hover. Überprüfen Sie, dass der Übergang flüssig zwischen den beiden Formen animiert, ohne visuelle Störungen oder Sprünge.

FAQ

Fragen zu CSS shape() Funktions-Generator

Wie unterscheidet sich shape() von polygon(), circle() und den anderen legacy Shape-Funktionen?

shape() ist ein einheitlicher Ersatz für polygon(), circle(), ellipse(), path(), inset() und rect(). Seine Hauptvorteile sind: Prozentkoordinaten relativ zu den eigenen Abmessungen des Elements anstatt zur Referenzbox-Größe, explizite Referenzbox-Schlüsselwörter (margin-box, padding-box, content-box, border-box) und die Fähigkeit, zwischen verschiedenen Shape-Typen zu animieren. Die legacy Funktionen können nicht über Shape-Typen hinweg interpolieren - Sie können mit den alten Funktionen nicht von polygon() zu circle() übergehen, aber shape() unterstützt dies.

Kann ich mit shape() zwischen einem Polygon und einem Kreis animieren?

Ja. Mit der älteren polygon()-Funktion konnten Sie nur zwischen zwei Polygonen mit derselben Anzahl von Eckpunkten animieren. Mit shape() können Sie zwischen zwei beliebigen unterstützten Shape-Typen animieren, solange die Koordinatenwerte für die Interpolation kompatibel sind. Aktivieren Sie den animationsfreundlichen Modus in diesem Generator, um sicherzustellen, dass die generierten Werte kompatible Syntax für flüssige CSS-Übergänge zwischen Shapes verwenden.

Welche Referenzbox sollte ich für shape-outside versus clip-path verwenden?

Für shape-outside ist die Standard-Referenzbox margin-box, aber padding-box ist normalerweise besser, weil Text bis zum Padding-Bereich fließen sollte, nicht in den Rand oder Margin hinein. Für clip-path ist der Standard border-box, was das Element einschließlich seines Rahmens beschneidet. Content-box ist nützlich, wenn Sie nur den Inhaltsbereich beschneiden möchten, unter Ausschluss von Padding und Rahmen. Die Wahl hängt davon ab, ob die Form die Abstände des Elements einschließen soll.

Welche Browser unterstützen die CSS shape()-Funktion?

Die shape()-Funktion ist Baseline 2026, unterstützt in Chrome 139+, Edge 139+ und Safari 18.2+. Firefox unterstützt shape() Stand Version 138 nicht. Für den Produktionseinsatz fügen Sie immer eine Fallback-Deklaration mit den legacy Shape-Funktionen (polygon(), circle(), etc.) oder clip-path: none vor der shape()-Deklaration ein.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren