Clip-Pfad-Generator
Erstellen Sie CSS-Clip-Pfad-Formen visuell – ohne manuelles Erraten der Koordinaten. Wählen Sie aus 12 Voreinstellungen, ziehen Sie Polygonpunkte in der Live-Vorschau und kopieren Sie das CSS mit einem Klick.
Shape Presets
Live Preview
Drag the dots to reshape. Click + on edges to add points.
Shape Controls
Drag the colored dots on the preview to reshape. 4 points
CSS Output
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
Browser support:clip-path is supported in all modern browsers (Chrome, Firefox, Safari 15.4+, Edge). For older Safari (<15.4), use the -webkit-clip-path prefix.
Merkmale
- Drag-to-Edit: Ziehen Sie Polygonpunkte direkt in die visuelle Vorschau, um sie in Echtzeit umzuformen. Sie müssen keine Koordinaten erraten – sehen Sie genau, wie Ihr Clippfad aussieht, während Sie ihn anpassen.
- 12 voreingestellte Formen: Beginnen Sie mit gängigen Formen: Kreis, Dreieck, Raute, Sechseck, Stern, Herz und mehr. Jede Voreinstellung ist auf den besten Ausgangspunkt abgestimmt und kann weiter angepasst werden.
- Sofortige CSS-Ausgabe: Kopieren Sie den CSS-Clip-Pfad-Wert oder die vollständige Deklaration mit einem Klick. Alle modernen Browser werden unterstützt, ohne dass Herstellerpräfixe erforderlich sind.
- Funktioniert offline: Die gesamte Verarbeitung erfolgt in Ihrem Browser – keine Server-Roundtrips. Das Tool funktioniert auch ohne Internetverbindung, sobald die Seite geladen ist.
Anwendungsfälle
- Kreatives Zuschneiden von Bildern: Schneiden Sie Bilder in benutzerdefinierte Formen – Rauten, Sechsecke, Sterne oder Polygone – für einzigartige Portfolio-Miniaturansichten, Galerieraster und visuelle Darstellungen im Heldenbereich.
- Parallaxen- und Scroll-Animationen: Fügen Sie Clip-Pfad-Übergänge hinzu, um Elemente sichtbar zu machen, während Benutzer scrollen. Animieren Sie zwischen Polygonformen, um sanfte, moderne, durch Scrollen ausgelöste Effekte zu erzielen.
- Karten- und Abschnittstrenner: Verwenden Sie diagonale oder gebogene Clippfade, um Abschnittstrenner zwischen Seitenblöcken zu erstellen. Besser als CSS-Transformationen zur Beibehaltung eines responsiven Layouts.
- Profil- und Avatar-Rahmen: Schneiden Sie Benutzerprofilfotos in Kreise, Sechsecke oder benutzerdefinierte Polygonrahmen für Teamseiten, soziale Funktionen und Benutzerverzeichnisse zu.
- Hero- und Landingpage-Design: Erstellen Sie auffällige Hero-Abschnitte mit diagonalen Teilungen, überlappenden Formen und asymmetrischen Clippfaden, die das Auge durch die Seite führen.
- Geometrische Marken-Assets: Erstellen Sie konsistente geometrische Formen für Markenillustrationen, Symbolhintergründe und dekorative Elemente, die zu Ihrer Markenidentität passen.
Häufig gestellte Fragen
CSS-Clip-Pfad wird verwendet, um Teile eines Elements auszuschneiden (auszublenden), sodass nur eine bestimmte Form sichtbar ist. Zu den häufigsten Anwendungen gehören: Zuschneiden von Bildern in benutzerdefinierte Formen (Kreise, Polygone, Sterne), Erstellen diagonaler Abschnittstrenner, Animieren von Seitenübergängen, Erstellen von Hover-Effekt-Enthüllungen und Erstellen geometrischer Designelemente ohne SVG oder Bildelemente.
Ja! Clip-Pfad ist eine animierbare Eigenschaft. Sie können CSS-Übergänge oder @keyframes verwenden, um zwischen Clip-Pfad-Werten zu animieren. Stellen Sie für ein reibungsloses Morphing sicher, dass beide Zustände dieselbe Formfunktion mit der gleichen Anzahl von Punkten verwenden (z. B. Polygon mit 6 Punkten, das in ein anderes Polygon mit 6 Punkten umgewandelt wird). Animationen zwischen verschiedenen Formtypen (Kreis zu Polygon) interpolieren möglicherweise nicht in allen Browsern reibungslos.
Die ältere Clip-Eigenschaft (veraltet) funktionierte nur mit absolut positionierten Elementen und akzeptierte eine rect()-Form. Clip-Path ist der moderne Ersatz, der die Formen Circle(), Ellipse(), Inset(), Polygon() und Path() unterstützt, mit jedem positionierten Element funktioniert und vollständig animierbar ist. Verwenden Sie für neue Projekte immer den Clip-Pfad.
Für eine reibungslose Polygon-zu-Polygon-Animation müssen beide Polygone die gleiche Anzahl an Punkten haben. Der Browser interpoliert die Position jedes Punkts unabhängig. Beispielsweise kann sich ein 6-zackiges Sechseck sanft in einen 6-zackigen Stern verwandeln. Wenn die Anzahl der Punkte unterschiedlich ist, rastet die Animation ein, anstatt sich reibungslos zu verändern.
Die Funktion path() akzeptiert SVG-Pfaddaten (d-Attributsyntax), um vollständig benutzerdefinierte Beschneidungsformen zu erstellen. Zum Beispiel: Clip-Pfad: Pfad('M 50 0 L 100 50 L 50 100 L 0 50 Z'); erschafft einen Diamanten. Dies gibt Ihnen unbegrenzte Formmöglichkeiten, die über das hinausgehen, was Kreise/Ellipsen/Einfügungen/Polygone erzeugen können. Hinweis: path() erfordert Safari 15.4+.
Nein – Clip-Pfad wirkt sich nur auf die visuelle Darstellung des Elements aus. Der ursprüngliche Begrenzungsrahmen des Elements nimmt immer noch denselben Platz im Seitenlayout ein. Ereignisse (Klick, Hover) werden in den meisten modernen Browsern nur innerhalb des sichtbaren abgeschnittenen Bereichs ausgelöst. Für ein wirklich nicht rechteckiges Layout sollten Sie die Verwendung von CSS-Shapes oder Shape-Outside in Betracht ziehen.
Für Polygon, Kreis, Ellipse und Einschub: In modernen Browsern (Chrome 55+, Firefox 54+, Safari 11+, Edge 79+) ist kein Präfix erforderlich. Für path(): Safari 15.4+ ohne Präfix. Bei sehr alten Browsern können Sie -webkit-clip-path als Fallback verwenden. Das Tool gibt einen standardmäßigen Clip-Pfad ohne Präfix aus, der in allen aktuellen Browsern funktioniert.
Ja! Clip-Pfad kann auf jedes HTML-Element angewendet werden, einschließlich Text. Sie können Text in bestimmte Formen zuschneiden – der Text selbst wird jedoch abgeschnitten und nicht neu umflossen. Für Text, der einem Pfad oder einer Form folgt, verwenden Sie stattdessen CSS-Formen mit „Shape-Outside“. Eine beliebte Anwendung ist die Erstellung reiner Text-Enthüllungsanimationen mit Clip-Pfad-Morphing.