Erstellen Sie individuelle CSS-clip-path-Polygone mit interaktiven Anfassern. Kopieren Sie browserübergreifenden CSS-Code, SVG-Pfade und responsive Prozentkoordinaten.
-webkit-clip-path: polygon(
0.0% 0.0%,
100.0% 0.0%,
100.0% 85.0%,
0.0% 100.0%
);
clip-path: polygon(
0.0% 0.0%,
100.0% 0.0%,
100.0% 85.0%,
0.0% 100.0%
);Erstellen Sie individuelle CSS-clip-path-Polygone mit interaktiven Ziehpunkten. Kopieren Sie browserübergreifenden CSS-Code, SVG-Pfade und responsive Prozentkoordinaten.
Offizielle funktionale Notation gemäß W3C CSS Shapes Module Level 1. Akzeptiert eine optionale Füllregel ('nonzero' oder 'evenodd'), gefolgt von kommagetrennten Koordinatenpaaren. Jedes Koordinatenpaar besteht aus zwei durch Leerzeichen getrennten Längen- oder Prozentwerten (X Y).
Bestimmt die Auswertung sich selbst schneidender Polygonpfade und verschachtelter Aussparungen. 'nonzero' füllt alle umschlossenen Vektorschleifen aus; 'evenodd' alterniert den Füllzustand an jeder Strahlgrenze und ermöglicht so geometrische Donut-Löcher sowie hohle Rahmenmasken.
Definiert die Begrenzungsbox (Bounding Box) als Koordinatenanker für prozentuale Berechnungen. Optionen umfassen 'border-box' (inklusive Rahmen), 'padding-box' (ohne Rahmen), 'content-box' sowie SVG 'fill-box'/'stroke-box'/'view-box'. Standardwert für HTML-Elemente ist 'border-box'.
Gilt für SVG-<clipPath>-Definitionen. 'objectBoundingBox' normalisiert die Koordinaten auf Dezimalwerte zwischen 0.0 und 1.0 relativ zur Begrenzungsbox des Zielelements; 'userSpaceOnUse' bindet die Koordinaten fest an das absolute Koordinatensystem des SVG-Canvas.
Weist die Browser-Rendering-Engine an, das maskierte Element vor Beginn der Animation auf eine eigene GPU-Compositor-Ebene auszulagern. Dies verhindert rechenintensive CPU-Paint-Zyklen und sichert stabile 60/120 FPS bei Keyframe-Formtransformationen.
CSS-Transitions und @keyframes auf clip-path interpolieren nur dann flüssig, wenn Ausgangs- und End-Polygon exakt dieselbe Anzahl an Stützpunkten in identischer Indexreihenfolge aufweisen. Morpht ein 3-Punkt-Dreieck in ein 8-Punkt-Achteck, kann der Browser die Geometrie nicht interpolieren und schaltet bei 50 % abrupt um. Lösung: Fügen Sie kollineare Dummy-Punkte entlang der Dreieckskanten ein, sodass beide Formen exakt 8 Stützpunkte deklarieren.
Um ein transparentes Fenster, einen Donut-Ring oder einen Fotorahmen-Ausschnitt innerhalb eines einzelnen CSS-Polygons zu erstellen, deklarieren Sie 'polygon(evenodd, ...)'. Zeichnen Sie den äußeren Rand im Uhrzeigersinn (von 0% 0% bis 100% 100%), führen Sie dann einen Stegschnitt ins Innere aus und umfahren Sie das innere Ausschnittfenster gegen den Uhrzeigersinn. Der 'evenodd'-Ray-Casting-Algorithmus subtrahiert die innere Fläche und erzeugt ein transparentes Zentrum.
Anders als bei 'opacity: 0' oder 'border-radius', bei denen rechteckige transparente Ecken Klicks weiterhin abfangen, beschränkt 'clip-path' Benutzerinteraktionen (Klick, Hover, Touch) strikt auf das sichtbare Polygoninnere. Klicks außerhalb der beschnittenen Begrenzungslinie gehen nahtlos an darunterliegende DOM-Elemente durch, ohne dass 'pointer-events: none' erforderlich ist.
Beim lückenlosen Aneinanderfügen angrenzender clip-path-Elemente (z. B. bei diagonal geteilten Hero-Sektionen) kann das GPU-Antialiasing feine 1-Pixel-Hintergrundnähte aufblitzen lassen. Beheben Sie dies durch eine minimale Überlappung von 0,2 % an den gemeinsamen Schnittkantenkoordinaten oder durch 'outline: 1px solid transparent', um ein weiches GPU-Kanten-Blending zu erzwingen.
Prüfen Sie die Vertex-Anzahl in beiden Keyframes der CSS-Animation. Die Interpolation von CSS-Polygonen erfordert zwingend eine identische Anzahl an Koordinatenpaaren. Nutzen Sie die Normalisierungsfunktion dieses Generators, um der einfacheren Form kollineare Ankerpunkte hinzuzufügen, sodass beide Zustände dieselbe Anzahl an Punkten aufweisen.
Die Eigenschaft 'clip-path' schneidet sämtliche Kindelemente und Box-Schatten außerhalb ihrer Grenze ab und erzeugt einen lokalen Stapelkontext (Stacking Context). Lagern Sie Schlagschatten auf ein übergeordnetes Elternelement mit 'filter: drop-shadow(...)' aus und rendern Sie Popovers oder Tooltips über ein React Portal direkt im Document Body.
WebKit benötigt für ältere iOS- und macOS-Versionen (Safari 13 und älter) das Hersteller-Präfix. Definieren Sie in Ihrem Stylesheet stets '-webkit-clip-path: polygon(...)' unmittelbar vor der standardisierten, ungepräfixten Eigenschaft 'clip-path'.
Wenn sich Polygonkanten überkreuzen, berechnet die Standard-Füllregel Windungszahlen, die umschlossene Bereiche invertieren können. Entwirren Sie überkreuzte Anfasserpunkte auf der interaktiven Zeichenfläche oder stellen Sie den Parameter fill-rule auf 'nonzero', um alle überlappenden Vektorkonturen vollflächig zu füllen.
Ein CSS-clip-path-Polygon wird mit der Syntax 'clip-path: polygon(x1 y1, x2 y2, ...)' definiert. Jeder Stützpunkt wird durch horizontale (X) und vertikale (Y) Koordinaten beschrieben, die durch ein Leerzeichen getrennt sind; die einzelnen Punktepaare werden durch Kommas getrennt. Die Koordinaten werden üblicherweise in Prozent relativ zur Begrenzungsbox des Elements angegeben (von 0% 0% oben links bis 100% 100% unten rechts). Moderne Browser unterstützen sowohl Prozent- als auch Pixelwerte mit direkter GPU-Hardwarebeschleunigung.
Ja, CSS-clip-path-Polygone lassen sich nahtlos mit CSS 'transition: clip-path 0.4s ease' oder '@keyframes' animieren, vorausgesetzt, Start- und Endzustand besitzen exakt dieselbe Anzahl an Stützpunkten. Bei abweichenden Punktzahlen können Browser die Koordinaten nicht stufenlos interpolieren und springen unvermittelt um. Sie können jede Form in eine andere überführen (Morphing), indem Sie die einfachere Form mit kollinearen Stützpunkten auffüllen, bis die Punktanzahl der Zielform entspricht.
CSS 'clip-path: polygon()' ist extrem schlank, wird direkt in reinem CSS ohne zusätzliches HTML-Markup definiert und unterstützt responsive Prozentangaben nativ, ist jedoch auf geradlinige Kanten beschränkt. SVG '<clipPath>' hingegen unterstützt geschwungene kubische und quadratische Bézier-Kurven (<path>), Kreise, Ellipsen und Textmasken, erfordert jedoch ein separates SVG-Element im DOM, das über 'clip-path: url(#id)' referenziert wird. Für geradlinige geometrische Formen bietet CSS-Polygon deutlich schnellere Renderzeiten und null DOM-Overhead.
Gemäß W3C-Spezifikation beschneidet CSS 'clip-path' neben der visuellen Darstellung auch den interaktiven Trefferbereich (Hit-Testing) des Elements. Bereiche außerhalb der Polygonkontur registrieren weder Klicks noch Hover- oder Touch-Ereignisse, sodass darunterliegende DOM-Elemente uneingeschränkt bedienbar bleiben. Falls Klicks blockiert werden, prüfen Sie, ob ein übergeordneter Container ohne clip-path Zeigerereignisse abfängt oder ob ein unbeschnittenes Pseudoelement (::before/::after) die Fläche überlagert.
Farbpaletten sofort aus Bildern extrahieren. Dominante HEX-, RGB- und HSL-Farbfelder generieren, CSS- oder Tailwind-Tokens exportieren und WCAG-Barrierefreiheit auf Kontrast prüfen.
Berechnen Sie Maße im Goldenen Schnitt und Proportionen des Goldenen Rechtecks sofort. Längen nach Phi (1,618) teilen, Typografie skalieren und responsive Raster erstellen.
Erstellen Sie erhabene, vertiefte und flache Soft-UI-Schatten mit dem Neumorphismus-Generator. Kopieren Sie sauberen CSS-, Tailwind- und SCSS-Code mit optischer Lichtfeld-Vorschau in Echtzeit.
Harmonische Farbschemata und Paletten direkt berechnen. Komplementäre, analoge, triadische und Split-Paletten mit WCAG-Kontrastprüfung in Echtzeit und CSS-Export erstellen.
Modernen CSS-Glassmorphism- & Milchglas-Code mit Live-Reglern für backdrop-filter, Unschärfe, Deckkraft und Schatten erzeugen. Reines HTML & CSS sofort kopieren.
Bilder online ohne Qualitätsverlust komprimieren. JPG-, PNG- und WebP-Dateien direkt im Browser verkleinern – ohne Server-Uploads, mit Ziel-KB-Solver und ZIP-Batch-Export.