CSS-clip-path-Generator

Von Bogdan Sandu (EN) · Veröffentlicht am 9 Juni 2025 · Zuletzt aktualisiert am 13 September 2026

Punkte verschieben, Code kopieren. Dieser CSS-Clip-Path-Generator ist ein visueller Polygoneditor: Verschieben Sie die Ziehpunkte in der Vorschau, und der darunter angezeigte Wert für clip-path wird laufend aktualisiert. Die Prozentangaben sorgen dafür, dass die Form mit dem Element skaliert, auf das Sie sie anwenden.

Was das Tool macht:

• Ziehen Sie Punkte auf die Live-Vorschau, um das Polygon neu zu formen; klicken Sie mit der rechten Maustaste auf einen Punkt, um ihn zu löschen
• 18 Voreinstellungen zum Starten von: Dreieck, Trapez, Parallelogramm, Raute, Fünfeck durch Achteck, Stern, Kreuz, Nachrichtenblase, Pfeile, Chevrons, plus Kreis, Ellipse und abgerundetes Rechteck
• Prozentsatz-Ausgabe, so dass ein Wert bei jeder Elementgröße funktioniert
• Kopieren Sie die fertige clip-path: …; Deklaration mit einem Klick oder Form zurücksetzen, um von vorne zu beginnen

Die Voreinstellungen für Kreis, Ellipse und abgerundetes Rechteck werden als Werte für circle(), ellipse() und inset() kopiert. Alles, was Sie von Hand zeichnen, ist ein polygon(). Es gibt keinen path()-Modus und keinen Pixel-Einheiten-Schalter; Für Kurven, die über das hinausgehen, was ein Polygon annähern kann, ist die weiter unten liegende SVG-Route die richtige.

So verwenden Sie diesen Clip-Path-Generator

1. Wählen Sie im Bedienfeld rechts eine Voreinstellung aus oder behalten Sie die Standardform bei
2. Ziehen Sie einen beliebigen Punkt, um ihn zu verschieben. Klicken Sie mit der rechten Maustaste auf einen Punkt, um ihn zu entfernen und den Umriss zu vereinfachen
3. Beobachten Sie den Wert unter der Vorschau. Es ist die exakte clip-path Deklaration, bereits in Prozent
4. Klicken Sie auf Kopieren und fügen Sie es in die Regel für Ihr Bild, Ihre Karte oder Ihren Abschnitt ein.
5. Testen Sie das reale Element in einigen Breiten, da sich die Prozentsätze an der Box des Elements orientieren und nicht an der Vorschau

Ein diagonaler Heldenschnitt ist die häufigste Sache, die die Leute hier bauen. Vier Punkte, eine Kante abgewinkelt:

.hero {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

Der Rest dieser Seite behandelt, was die Eigenschaft über Polygone hinaus tun kann, wie sich Koordinaten und Referenzboxen verhalten und wo eine generierte Form dazu neigt, zu brechen, sobald sie live ist.

Was ist ein CSS-Clip-Pfad-Generator?

Ein CSS-Clippfadgenerator ist ein browserbasiertes Werkzeug, das Clippfadwerte über eine visuelle Oberfläche erstellt, anstatt von Hand eingegebene Koordinaten zu verwenden.

Es sitzt über der clip-path-Eigenschaft (EN) selbst, die aus dem CSS Masking Module (EN) kommt und alles außerhalb einer ausgewählten Form verbirgt.

Die Eigenschaft ist nativ für CSS (EN), so dass die gesamte Aufgabe des Generators die Übersetzung ist, die gezogenen Punkte in eine Syntax umwandelt, die der Browser bereits versteht.

Was es von einem einfachen Code-Snippet unterscheidet, ist die Feedback-Schleife: Sie bewegen einen Griff, die Form wird auf dem Bildschirm aktualisiert und die passende polygon() oder circle() Zeichenkette wird mit aktualisiert.

Kein Kompilieren, kein separater Vorschauschritt, kein Raten von Prozentsätzen.

In Kürze:

• Kategorie: ein interaktives Formbearbeitungswerkzeug
• Funktion: Konvertiert gezogene Punkte in einfügefertiges CSS

Welche grundlegenden Formfunktionen werden von clip-path unterstützt?

Fünf grundlegende Shape-Funktionen decken fast alles ab, was ein Generator ausgeben kann: polygon(), circle(), ellipse(), inset() und path().

Jeder nimmt eine andere Art von Input entgegen. Einige Generatoren wechseln den Bearbeitungsmodus je nach Funktion; Dieses bearbeitet Polygone und dient den anderen Formen als Voreinstellungen.

path() ist die ungewöhnliche, da sie rohe SVG (EN) Pfaddaten akzeptiert.

Auf diese Weise kann ein Generator Ihnen Kurven liefern, die einfache Polygonmathematik nicht produzieren kann.

/* the same idea in three functions */
.avatar  { clip-path: circle(50% at 50% 50%); }
.card    { clip-path: inset(0 0 0 0 round 16px); }
.badge   { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

Die inset() Funktion akzeptiert auch abgerundete Ecken und verwendet genau dasselbe Wertmuster wie ein Standard border-radius generator.

Die Liste der Shape-Funktionen wächst ständig. Chrome lieferte eine sechste Option, shape(), in Chrome 135 (EN), mit Safari in Version 18.4.

Es schneidet an responsive, nicht-polygonale Umrisse, einschließlich Kurven, ohne dass eine separate SVG-Datei erforderlich ist.

Referenzrahmen und Koordinateneinheiten im Clip-Pfad

Clip-Pfad-Koordinaten gibt es in verschiedenen Einheiten, und die Auswahl wirkt sich darauf aus, wie sich die Form verhält, wenn die Seitengröße geändert wird. Dieser Generator schreibt nur Prozentsätze, was die richtige Standardeinstellung für alles ist, dessen Größe geändert werden muss.

• Prozentwerte: skalieren mit dem Element, sodass die Form ihre Proportionen behält, wenn sich die Größe des Felds ändert
• Pixelwerte: bleiben fest, nützlich für eine Form, die sich niemals dehnen sollte, wie z. B. einen Abzeichenausschnitt
• Viewport-Einheiten: Binden Sie die Form an das Browser-Fenster anstelle des Elements

Diese viewport-relative Option ist am wichtigsten bei vollständigen Abschnitten, wo die Form den Browser viewport (EN) verfolgen muss und nicht ein übergeordnetes Element.

Prozentsatzbasierte Koordinaten sind dagegen das, was eine ausgeschnittene Form zu einem Teil eines echten responsiven Designs (EN) macht. Die Punkte bewegen sich an jedem Haltepunkt proportional.

Jede Koordinate wird auch gegen einen bestimmten Referenzrahmen gemessen, und der von Ihnen ausgewählte Rahmen entscheidet, wo "0%" tatsächlich beginnt.

Das Umschalten des Referenzrahmens ohne Anpassung der Koordinaten ist ein häufiger Grund, warum eine generierte Form im Werkzeug richtig aussieht, sich aber verschiebt, sobald sie live ist.

Wie verwandelt ein Clip-Pfad Generator eine Form in CSS Code?

Ziehen Sie einen Punkt, und der Generator berechnet die Formfunktion hinter den Kulissen in Echtzeit neu.

In den meisten Tools gibt es keinen separaten "Generieren"-Button, da der Code immer aktuell ist.

Gemeinsame Bearbeitungsmethoden:

• Ziehen von Ziehpunkten auf einem Live-Vorschaubild
• Ein Punkt-für-Punkt Editor mit numerischen Eingabefeldern
• Freihandzeichnen für unregelmäßige, pfadbasierte Formen

Sobald Sie mit der Form zufrieden sind, gibt Ihnen das Werkzeug eine von zwei Ausgaben.

Die meisten Generatoren verwenden standardmäßig eine fertige Clip-Pfad-Deklaration, die Sie direkt in ein Stylesheet einfügen.

Eine Handvoll exportiert stattdessen rohe SVG-Pfaddaten, was nützlich ist, wenn Sie die Form in einem SVG-Dokument anstelle einer CSS-Regel erstellen.

Wie verhält sich der Clip-Pfad in Animationen und Übergängen?

Clip-Pfad animiert wie jede andere CSS-Eigenschaft, durch eine Übergangsregel oder eine vollständige Animationssequenz.

Es wird insbesondere durch zwei Mechanismen angetrieben: Übergänge für einfache Zustandsänderungen und CSS-Keyframes (EN) für mehrstufige Sequenzen.

Übereinstimmende Punkte: Eine Form mit der gleichen Anzahl von Koordinaten an beiden Enden verändert sich reibungslos.

Unzusammenpassende Punkte: Eine unterschiedliche Punktzahl zwischen den beiden Zuständen führt dazu, dass die Form anstelle des Tweens ausgerichtet wird.

Das Kombinieren des Übergangs mit einer benutzerdefinierten cubic-bezier-Easing-Kurve ist eine gängige Methode, um eine Formen-Enthüllung weniger mechanisch erscheinen zu lassen.

.card {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 400ms cubic-bezier(.4, 0, .2, 1);
}
.card:hover {
  /* same four points, so the shape tweens instead of snapping */
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

Welche Browser unterstützen Clip-Pfad, und was passiert, wenn sie es nicht tun?

Browser-Unterstützung für Clip-Pfad ist kein echtes Risiko mehr, und die Zahlen bestätigen das.

• Weit verbreitet seit Januar 2020: clip-path erreichte den Baseline-Status in allen wichtigen Browsern, pro MDN (EN)
• 96% globale Unterstützung: Kann ich verwenden (EN) verfolgt die Unterstützung von Clippfaden bei etwa 96% des verfolgten Browserverkehrs
• Präfix wird 2024 entfernt: WordPress core (EN) hat -webkit-clip-path aus seinem CSS entfernt, nachdem die Verwendung von Chrome 24 bis 54 auf 0,1% und Safari unter 13 auf 0,05% gefallen ist

Dieses Basislinien-Label ist wichtig, weil es signalisiert, dass das Feature in gewöhnlichen Projekten sicher ohne Polyfill versandt werden kann.

Das bedeutet nicht, dass alle Funktionen innerhalb von clip-path zur gleichen Zeit angekommen sind, da neuere Ergänzungen wie shape() immer noch über Engines hinweg aufholen.

In einem Browser, der die Eigenschaft vollständig ignoriert, folgen in der Regel drei Dinge:

• Das Element wird in voller Größe und Form gerendert, unbeschnitten
• Nichts anderes auf der Seite bricht, da Clip-Pfad nur die Farbe beeinflusst
• Jede Hover- oder Animation, die an die Form gebunden ist, wird einfach nicht ausgeführt

Das Schreiben einer einfachen Hintergrund- oder Rahmenregel vor der Clip-Pfad-Deklaration ist für die meisten Designs ein ausreichender Rückgriff. Es hilft auch beim Testen der cross-browser-kompatibilität (EN), die Lücke frühzeitig zu schließen.

Wofür wird ein CSS Clip-Pfad Generator verwendet?

Die meisten echten Anwendungsfälle fallen in eine Handvoll wiederholbarer Designmuster, nicht einmalige Experimente.

• Diagonale Schnitte, die eine ansonsten rechteckige Seite aufteilen
• Formtrenner zwischen einer Kopfzeile und dem Inhalt darunter
• Hover-Show-Effekte auf Produktkarten und Miniaturansichten
• Blob oder organische Ausschnitte für Porträt- und Illustrationsbilder

Diagonale Schnitte erscheinen am häufigsten in einer Landingpage (EN)-Heldensektion, wo eine einzelne abgewinkelte Kante das Intro vom nächsten Inhaltsblock trennt.

Dreieckige Ausschnitte folgen der gleichen Polygonmathematik, die einen dedizierten CSS-Dreieckgenerator (EN) antreibt, nur auf ein Foto oder einen Kartenhintergrund anstelle eines einfachen Kastens angewendet.

Keine dieser Techniken ist eine Mainstream-Layout-Technik, und die Daten bestätigen dies. clip-path erscheint nur bei etwa 0,06% aller Chrome-Seitenladung, die von Chrome-eigenen Nutzungszählern (EN) verfolgt werden.

Diese niedrige Zahl passt zu einem Werkzeug, das für einen bewussten visuellen Akzent verwendet wird, nicht etwas, das jede Website benötigt.

Welches Clip-Pfad-Generator-Tool sollten Sie verwenden?

Vier Werkzeuge decken fast jeden Workflow ab, und die richtige Auswahl hängt davon ab, ob Sie neu beginnen oder ein Shape bearbeiten, das bereits auf einer Seite aktiv ist. Der Generator auf dieser Seite sitzt im selben Slot wie Clippy: Drag-Handles, Polygon-Ausgabe, Presets, nichts zu installieren.

Clippy (EN), gebaut von Entwickler Bennett Feely, ist der bekannteste Weg, um einen polygon() String zu erhalten, ohne dass etwas installiert ist.

Firefox's Shape Path Editor (EN) funktioniert anders. Es bearbeitet den Clip-Pfad-Wert, der sich bereits im CSS-Regeln-Bedienfeld befindet, anstatt einen neuen Wert von Grund auf neu zu generieren.

Chrome hat kein natives Äquivalent, das in DevTools integriert ist. Die nächstgelegene Option ist eine Erweiterung von Drittanbietern, die seit 2015 nicht mehr aktualisiert wurde.

Wenn Sie ein Layout entwerfen, bevor es CSS gibt, ist das Ausschneiden einer Form in Figma (EN) normalerweise schneller als der Kampf mit Koordinaten in einem Browser-Tool.

Zwei Fragen grenzen die Auswahl schnell ein:

• Benötigen Sie das Shape nur einmal oder passen Sie es ständig an, wenn sich das Layout ändert?
• Gibt es die Form bereits auf einer echten Seite oder starten Sie von einer leeren Leinwand aus?

Wann sollte man clip-path anstelle von CSS Mask oder dem SVG clipPath Element verwenden?

Alle drei können einen Teil eines Elements verbergen, lösen aber unterschiedliche Probleme.

clip-path:

• Pro: Formen mit harten Kanten und einer kurzen, lesbaren Syntax
• Nachteile: Kann keine Kanten verblassen oder weich machen

CSS-Maske:

• Pro: Verlauf und bildbasierte Transparenz, nicht nur eine Form
• Nachteile: schwerer auf der Farbleistung über große Flächen

SVG clipPath:

• Pro: eine Formdefinition wird über mehrere Elemente hinweg wiederverwendet
• Nachteile: lebt im Markup und nicht im Stylesheet, leicht zu vergessen

Die Verlaufsseite dieses Vergleichs ist einfaches CSS: mask-image verwendet die gleiche Verlaufssyntax, die überall sonst verwendet wird, sodass ein CSS-Gradientengenerator (EN) den Wert abdeckt und Sie den Eigenschaftsnamen austauschen.

Das SVG-Element <clipPath> ist tatsächlich länger stabil als die CSS-Eigenschaft, die erstellt wurde, um darauf zu verweisen, Baseline seit Juli 2015 verfügbar (EN).

path() selbst kam Jahre nach clip-path und landete in Chrome 88, Firefox 71 und Safari 13.1, laut Browser-Kompatibilitätsdaten, die von MDN verfolgt werden (EN).

Wie erstellt man eine Form mit einem CSS-Clip-Pfad-Generator?

Der Arbeitsablauf ändert sich kaum von einem Generator zum nächsten.

1. Wählen Sie eine Ausgangsformfunktion, normalerweise polygon() für einen benutzerdefinierten Schnitt oder circle() für einen einfachen Schnitt
2. Ziehen Sie Punkte in der Vorschau, bis der Umriss Ihren Wünschen entspricht
3. Wechseln Sie die Koordinateneinheit auf Prozent, wenn die Form mit ihrem Container die Größe ändern muss (dieser Generator ist bereits vorhanden)
4. Kopieren Sie die generierte Clip-Pfad-Deklaration in Ihr Stylesheet
5. Testen Sie die Form bei einigen Bildschirmbreiten mit Medienabfragen (EN), da eine Form, die bei einer Breite richtig aussieht, bei einer anderen abweichen kann

Zwei Fehler erklären die meisten "es funktionierte im Tool, aber nicht auf meiner Website" Beschwerden.

• Kopieren von Pixelkoordinaten aus einer Vorschau, die eine andere Elementgröße als die tatsächliche Seite verwendet
• Vergessen, dass Prozentpunkte gegen den Referenzrahmen gemessen werden, nicht gegen das volle Browserfenster

Wann funktioniert clip-path nicht?

Clip-Pfad schlägt still aus. Nichts wirft einen Fehler aus, die Form verhält sich einfach nicht so, wie sie im Generator ausgesehen hat.

• Klicks verschwinden mit dem Clip: Standardmäßig werden Zeigerereignisse nicht innerhalb des ausgeschnittenen Bereichs ausgelöst, sodass eine teilweise von einer Form verdeckte Schaltfläche dort keine Klicks mehr empfängt (MDN (EN))
• z-Index kann unerwartet verschoben werden: jeder Clip-Pfad-Wert außer none erzeugt einen neuen Stapelkontext, genauso wie Deckkraft bei Werten unter 1. Das kann leise ändern, wie sich überlappende Elemente überlagern
• Größenänderung bricht die Mathematik: Prozentuale Koordinaten werden zum Zeitpunkt des Renderns an der Referenzbox gesperrt. Eine Box, die ihre Größe durch JavaScript anstatt durch CSS ändert, kann die Form an der falschen Stelle abgeschnitten aussehen lassen.

Nichts davon wird in der Vorschau eines Generators angezeigt, da es sich bei der Vorschau um einen einzelnen, statischen Schnappschuss einer Elementgröße handelt.

Das Testen der Form innerhalb der tatsächlichen Seite, in mehr als einer Breite und mit echten interaktiven Elementen darunter, erfasst alle drei, bevor sie versendet werden.

Häufige Fragen: CSS-clip-path-Generator

Was ist der Unterschied zwischen Clip-Pfad und Shape-outside?

clip-path verbirgt Teile eines Elements visuell, während shape-outside nur ändert, wie Inline-Text um ein Floating-Element gelegt wird.

Beide teilen die gleichen grundlegenden Formfunktionen, aber shape-outside berührt nie das, was das Element selbst malt.

Kann Clip-Pfad mit CSS-Transformation kombiniert werden?

Ja. clip-path und transform gelten unabhängig voneinander, sodass das Skalieren, Drehen oder Übersetzen eines Elements den Clip nicht deaktiviert.

Die Form bleibt an der Referenzbox des Elements verankert und wird mit jeder angewendeten Transformation verschoben und in der Größe verändert.

Beeinträchtigt der Clip-Pfad die Seitenleistung?

Einfache Formen wie circle() oder polygon() sind billig zu rendern und verursachen selten eine messbare Verlangsamung.

Komplexe path()-Formen werden bei jedem Animationsframe neu berechnet, sodass das Zuschneiden eines großen, häufig animierten Elements mehr kostet als das Zuschneiden eines kleinen statischen Elements.

Wie lässt sich eine Clip-Pfad-Form über Haltepunkte hinweg ansprechend gestalten?

Prozentkoordinaten werden automatisch skaliert, können aber eine Form verzerren, wenn sich das Seitenverhältnis zwischen Haltepunkten stark verändert.

Eine separate clip-path-Regel innerhalb einer Medienabfrage zu schreiben, anstatt eine Prozentform für jede Breite, hält Proportionen absichtlich und nicht zufällig.

Kann der Clip-Pfad auf Hintergrundbilder angewendet werden?

Ja, allerdings nicht selektiv. Clip-Pfad schneidet die gesamte Elementbox beim Malen ab, sodass jedes Hintergrundbild, jede Farbe oder jeder Rand zusammen mit dem Vordergrund ausgeschnitten wird.

Wenn Sie nur den Hintergrund ausschneiden und Text oder Symbole unberührt lassen möchten, geben Sie dem Hintergrund ein eigenes Element.

Was sollten Sie zuerst mit einem CSS-Clip-Pfad-Generator überprüfen?

Ein CSS-Clippfadgenerator wird erst als vertrauenswürdig eingestuft, wenn seine Ausgabe drei Prüfungen überlebt hat. Das Referenzfeld entspricht dem Live-Element, die Koordinateneinheiten halten mehr als eine Bildschirmbreite aus und die Form erhält immer noch Klicks, wo ein Besucher sie erwartet.

Die Reihenfolge sieht so aus:

• Passen Sie zuerst die Referenzbox an
• Ändern der Größe des Browsers Sekunde, Prüfung auf prozentuale Abweichung
• Klicken Sie durch die dritte Form, um zu bestätigen, dass nichts Wichtiges verschluckt wird

Wenn Sie den Klicktest vor dem Größenänderungstest ausführen, sparen Sie einen ersten Durchgang, riskieren aber eine Form, die richtig aussieht, aber falsch sitzt, wenn sich das Layout verschiebt.

Diese Reihenfolge gilt für die im September 2026 verifizierte Browserlandschaft. Es löst sich, sobald neuere Grundformfunktionen die verbleibende Lücke zwischen den Motoren schließen.

Wenn eine Form alle drei Prüfungen bestanden hat, ist die Animation der logische nächste Schritt. Ein dedizierter CSS-Animationsgenerator (EN) verwaltet das Keyframe-Timing ohne handgeschriebene Easing-Kurven.