Skip to main content

CSS Clip Path Generator

Create CSS clip-path shapes with visual editing and presets. Clip-path maker and CSS shape generator in one tool.

Geprüft von · Zuletzt geprüft

Points (3)
1,
2,
3,
CSS
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Arbeiten mit dem Clip-Path-Maker

  1. Wähle eine Voreinstellungsform aus der Reihe oben - Kreis, Ellipse, Dreieck, Fünfeck, Sechseck, Achteck, Stern, Kreuz, Pfeil - oder wähle "Benutzerdefiniertes Polygon", um mit einer leeren Eckpunktliste zu beginnen.
  2. Ziehe die Kontrollpunkte direkt auf der Vorschaufläche. Jeder Griff entspricht einem Eckpunkt in der zugrunde liegenden polygon()- oder circle()-Funktion, und Koordinaten werden als Prozentsätze der Referenzbox des Elements ausgedrückt.
  3. Numerisch feinabstimmen mit den Eingaben unter der Vorschau. Gib genaue Werte ein, wenn du eine präzise Form benötigst, die mit anderen Elementen auf deiner Seite ausgerichtet ist.
  4. Schalte die Referenzbox um (border-box, padding-box, content-box), um zu sehen, wie dieselben Prozentsätze je nach dem Ort des "0% 0%"-Ursprungs unterschiedliche Clip-Regionen erzeugen.
  5. Kopiere das generierte CSS. Die Ausgabe ist eine einzige clip-path-Deklaration, die inline, in einem Stylesheet oder über CSS-in-JS funktioniert.

Unter der Haube: Wie clip-path abschneidet

Die clip-path-Eigenschaft stammt aus CSS Masking Module Level 1. Sie akzeptiert eine grundlegende Formfunktion - circle(), ellipse(), polygon(), inset(), path() oder die neuere shape() - oder einen Verweis auf ein SVG-<clipPath>-Element über url(). Zur Renderzeit berechnet der Browser die Form gegen die Referenzbox des Elements und verwirft alle Pixel außerhalb dieser Region. Alles innerhalb der Form wird normal gerendert; alles außerhalb wird einfach nicht gezeichnet - Hit-Testing, Zeigerereignisse und Auswahl folgen dem abgeschnittenen Umriss.

Intern behandeln Chromium und WebKit clip-path als eine Schablone, die während des Compositor-Durchlaufs angewendet wird, weshalb sie günstig zu animieren ist und kein Layout erzwingt. Gecko nimmt einen ähnlichen Weg über WebRender. Der performance-intensive Fall ist clip-path: path() mit Tausenden von Bezier-Segmenten oder URL-referenzierte SVG-Clips auf großen Elementen, die beide den schnellen Pfad verlassen. Grundlegende Formen bleiben GPU-beschleunigt, unabhängig von der Elementgröße, sodass ein Polygon über den gesamten Viewport immer noch günstig ist.

Wo clip-path seinen Nutzen zeigt

  • Abgewinkelte Abschnittsteiler - schräge Ober- und Unterseiten bei Hero-Sektionen ohne SVG-Hintergründe.
  • Diagonale Bildmasken für Magazin-Redaktions-Layouts.
  • Sechseckige Avatar-Raster für Team-Seiten oder spielinspirierte Benutzeroberflächen.
  • Enthüllungsanimationen, die Inhalte enthüllen, indem der Radius eines Kreises von 0 auf 100% animiert wird.
  • Dekorative Beschriftungen - Sprechblasen, pfeilbespitzte Bänder, Stubs-Abzeichen.
  • Fokus-Scheinwerfer, die die Seite ausblenden, außer einem Ring um ein hervorgehobenes Onboarding-Ziel.

Fallstricke, die Zeit kosten

  • Kinder-Overflow wird ebenfalls abgeschnitten. Alles, was über den Clip-Pfad hinausragt - Tooltips, Dropdowns, Fokusringe - wird abgeschnitten. Plane das Layout so, dass diese in einem geschwisterlichen Element leben, nicht im abgeschnittenen.
  • Interaktive Regionen schrumpfen. Der Hit-Test-Bereich entspricht der abgeschnittenen Form. Eine Schaltfläche mit einem Clip-Pfad hat eine kleinere klickbare Region als ihre Begrenzungsbox vermuten lässt, was Benutzer überraschen kann, die auf die Ecke zielen.
  • Die Animation von polygon() erfordert übereinstimmende Eckpunktanzahlen. CSS kann nur zwischen zwei polygon()-Werten interpolieren, wenn beide dieselbe Anzahl von Punkten haben. Für das Morphing zwischen Formen mit unterschiedlichen Eckpunktanzahlen füge redundante kollineare Punkte hinzu, um die kürzere Liste aufzufüllen.
  • Fokusumrisse können abgeschnitten werden. Standard-:focus-visible-Umrisse des Browsers befinden sich knapp außerhalb der Rahmenbox. Wenn clip-path diesen Bereich entfernt, verlieren Tastaturbenutzer den sichtbaren Fokusindikator - füge einen benutzerdefinierten inneren Fokusstil hinzu.
  • Safari älter als 13.1 benötigten -webkit-clip-path als Fallback. Moderne Builds akzeptieren die nicht präfix-sierte Eigenschaft; caniuse.com/css-clip-path zeigt die vollständige Kompatibilitätsmatrix.
  • Prozentsätze werden gegen die Referenzbox aufgelöst, nicht gegen den Viewport. Ein responsives Element mit einem Polygon-Clip wird beim Vergrößern umgeformt, was normalerweise wünschenswert ist, aber sorgfältig gestaltete Winkel verzerren kann.

Spezifikation und formaler Hintergrund

CSS Masking Module Level 1 definiert die aktuelle clip-path-Eigenschaft zusammen mit der verwandten mask-*-Familie. Vor dieser Spezifikation war Clipping nur über das SVG-<clipPath>-Element verfügbar, das auf SVG-Inhalte angewendet wurde - CSS clip-path verallgemeinerte die Idee auf jedes HTML-Element. Die grundlegenden Formfunktionen stammen aus CSS Shapes Module Level 1, das sie ursprünglich für Float-Wrapping (shape-outside) definierte und dann für Clipping übernommen wurde. Level 4 von CSS Shapes fügt jetzt shape() hinzu, einen Bezier-fähigen Nachfolger von polygon(), der in Chrome 132+ ausgeliefert wird und schließlich die meisten path()-Verwendungen ersetzen wird. Für die veraltete clip-Eigenschaft - die nur rect() unterstützte - höre auf, sie zu verwenden; sie wurde formal in CSS Masking Level 1 veraltet und wird in modernen DevTools warnen.

Clip-path vs. Masking vs. SVG

Drei ähnlich aussehende Techniken lösen überlappende Probleme. clip-path gibt dir einen hartrandigen binären Clip - ein Pixel wird entweder angezeigt oder verborgen. mask-image gibt dir weiches, Pro-Pixel-Alpha über jedes Bild oder jeden Gradienten, was du für federartige Kanten, radiale Vignetten oder Texturmasken möchtest. SVG-<clipPath> über url() referenziert ist die mächtigste Option - es unterstützt beliebige Bezier-Kurven und kann clipPathUnits="objectBoundingBox" für wiederverwendbare Formen verwenden - aber du lieferst Markup zusammen mit dem CSS. Faustregeln: Grundlegendes Polygon oder Kreis = CSS-clip-path; weichrandiges Verblassen = mask-image mit einem Gradienten; komplexer geschwungener Umriss = SVG-<clipPath>. Im Vergleich zum Zeichnen eines maskierten Bildes in Figma und Exportieren eines PNG mit eingebrannter Transparenz ist CSS-Clipping responsiv, themebar und wiegt null Bytes extra. Wo es immer noch verliert: Pro-Element-Filter, die nach dem Clipping angewendet werden, malen manchmal um den abgeschnittenen Bereich auf Safari herum, und das Drucken von clip-path ist über PDF-Rendering-Engines hinweg unzuverlässig.

Häufig gestellte Fragen

Was ist der Unterschied zwischen clip-path und overflow: hidden?

<code>overflow: hidden</code> schneidet Kinder auf die rechteckige Auffüllungsbox des Elements zu - du bekommst immer ein Rechteck. <code>clip-path</code> schneidet das Element selbst (einschließlich seines Hintergrunds und Rahmens) in eine beliebige Form - Kreis, Polygon, SVG-Pfad oder eine gradientenbasierte Maske. Verwende overflow für "Kinder daran hindern, einem Rechteck zu entkommen" und clip-path für "das Element selbst in eine nicht-rechteckige Form bringen".

Verbirgt clip-path den box-shadow meines Elements?

Ja - box-shadow wird außerhalb der Rahmenbox des Elements gezeichnet, und clip-path verwirft alles jenseits der Clipping-Region. Wenn du einen Schatten um eine nicht-rechteckige Form benötigst, verwende stattdessen <code>filter: drop-shadow()</code> auf dem geclippen Element, da drop-shadow der Alpha-Kontur statt dem Rechteck folgt. Beachte, dass drop-shadow auf großen Elementen aufwendiger ist als box-shadow auf Rechtecken.

Kann ich clip-path flüssig animieren?

Ja, mit einer wichtigen Einschränkung: Die Interpolation funktioniert nur sauber zwischen zwei Werten derselben Formfunktion. Die Animation von <code>polygon(...)</code> zu <code>polygon(...)</code> funktioniert, wenn beide dieselbe Eckpunktanzahl in derselben Reihenfolge haben. Die Animation von <code>circle()</code> zu <code>circle()</code> funktioniert immer. Du kannst <code>circle()</code> nicht direkt zu <code>polygon()</code> animieren - der Browser springt beim 50%-Marke. Für formenübergreifendes Morphing verwende die neuere <code>shape()</code>-Funktion (Chrome 132+) oder SVG <code>&lt;animate&gt;</code>.

Warum reagiert mein anklickbares Element nicht in den abgeschnittenen Ecken?

Weil clip-path auch die Hit-Test-Region abschneidet. Der Browser behandelt die abgeschnittene Form als effektiven Footprint des Elements für Zeigerereignisse - Klicks in den transparenten Ecken werden an das darunter liegende Element weitergegeben. Das ist fast immer das gewünschte Verhalten für visuelle Formen, kann dich aber überraschen, wenn du dekorative Überlagerungen hast. Wenn du das vollständige Rechteck klickbar halten möchtest, wickle das geclippte Visual in einen rechteckigen Elternteil ein, der die Zeigerereignisse behandelt.

Sendet dieses Tool meine Formdaten an einen Server?

Nein. Das Koordinatenarray, die aktive Voreinstellung und der berechnete CSS-String leben alle im Preact-Komponentenstatus. Die SVG-Vorschau wird direkt aus diesem Status gerendert, und die Kopier-Schaltfläche schreibt über <code>navigator.clipboard.writeText</code> in die Zwischenablage, ohne einen Netzwerkabruf zu tätigen.

Wird clip-path gut genug unterstützt, um es in der Produktion einzusetzen?

Ja. Laut caniuse.com/css-clip-path haben die grundlegenden Formfunktionen (<code>circle</code>, <code>ellipse</code>, <code>polygon</code>, <code>inset</code>) eine globale Unterstützung von 97%+. Safari ab 13.1, Chrome 55+, Firefox 54+ und modernes Samsung Internet funktionieren alle ohne Präfixe. Die <code>path()</code>-Unterstützung kam später (Chrome 88+, Safari 17+); die neueste <code>shape()</code>-Funktion ist vorerst nur für Chromium verfügbar.

Warum sieht mein Polygon anders aus, wenn sich das Element vergrößert?

Weil Polygon-Koordinaten standardmäßig Prozentsätze sind, die gegen die aktuelle Elementgröße aufgelöst werden. Ein perfekt reguläres Sechseck bei 400x400 wird bei 400x200 verzerrt, weil die Eckpunktprozentsätze dieselben relativen Positionen in einem jetzt rechteckigen Bereich erzeugen. Optionen: feste Pixelkoordinaten verwenden, das <code>aspect-ratio</code> des Elements einschränken oder das Strecken als beabsichtigtes responsives Verhalten akzeptieren.

Was ist der Unterschied zwischen clip-path und mask-image?

Clip-path erzeugt einen hartrandigen binären Clip - jedes Pixel wird entweder vollständig angezeigt oder vollständig verborgen. Mask-image (CSS Masking Level 1) verwendet das Alpha oder die Luminanz eines Bildes oder Gradienten als Pro-Pixel-Maske, was dir weiche Kanten, Auffederung und Textureffekte ermöglicht. Faustregel: Wenn der gewünschte Rand scharf und geometrisch ist, wähle clip-path; wenn er verblasst, graduiert oder eine Textur verwendet, wähle mask-image.

Ist "Clip-Path-Maker" dasselbe wie ein Clip-Path-Generator?

Ja. "Clip-Path-Maker", "CSS-Clip-Path-Maker", "Clip-Path-Generator", "Clip-Path-Maker" und "CSS-Form-Generator" verweisen alle auf dieselbe Art von Tool - eines, das dir erlaubt, Polygon-Punkte visuell zu ziehen und dir die endgültige <code>clip-path</code>-CSS-Deklaration übergibt. Diese Seite tut genau das, mit Kreis-, Ellipsen-, Polygon-, Stern-, Pfeil- und benutzerdefinierten Eckpunkt-Voreinstellungen. Für dreieckspezifische Arbeit deckt der <a href="/tools/css-triangle-generator/">CSS-Dreieck-Generator</a> den klassischen Border-Trick-Ansatz ab, der kein <code>clip-path</code> benötigt.

Mehr CSS & Design

Aspect Ratio Calculator

Calculate and visualize aspect ratios for any dimensions.

Open tool

Blob Shape Generator

Generate organic blob shapes as SVG.

Open tool

Border Radius Generator

Create CSS border-radius with a visual corner editor.

Open tool

CSS Box Shadow Generator

Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.

Open tool

Color Palette Generator

Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).

Open tool

Color Picker

Pick colors visually and get HEX, RGB, and HSL values.

Open tool