CSS-Clip-Path-Generator
clip-path visuell erstellen: Standardformen oder frei ziehbare Polygonpunkte – fertiges CSS und Tailwind zum Kopieren.
Der CSS-Clip-Path-Generator erstellt Formen für die Eigenschaft clip-path. Du wählst eine Vorlage wie Dreieck, Sechseck, Stern oder Pfeil und ziehst die Polygonpunkte direkt in der Vorschau, oder du nutzt circle, ellipse und inset mit Reglern. Fertig sind der CSS-Code und die Tailwind-Klasse zum Kopieren.
| Punkt | x | y |
|---|---|---|
| 50 % | 0 % | |
| 100 % | 100 % | |
| 0 % | 100 % |
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);Formen mit clip-path
clip-path definiert einen sichtbaren Bereich für ein Element. Du kannst ihn mit
Grundformen beschreiben: polygon() für beliebige Vielecke, circle() und ellipse() für runde Ausschnitte und inset() für ein zugeschnittenes Rechteck
mit optionaler Rundung.
| Funktion | Beispiel |
|---|---|
| polygon | polygon(50% 0%, 100% 100%, 0% 100%) |
| circle | circle(50% at 50% 50%) |
| ellipse | ellipse(50% 35% at 50% 50%) |
| inset | inset(10% round 16px) |
So gehst du vor
- Vorlage wählen und Punkte ziehen.
- Ergebnis prüfen und Code kopieren.
- Für weiche Rundungen statt Ausschnitten nutzt du den Border-Radius-Generator, für fließende Verläufe hinter der Form den Gradient-Generator.
Beispiel
Ein Hero-Bild mit schräger Unterkante: clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%). In Tailwind schreibst du [clip-path:polygon(0_0,100%_0,100%_85%,0_100%)].
Häufige Fragen
Was macht clip-path?
Die Eigenschaft schneidet ein Element auf eine Form zu. Alles außerhalb der Form ist unsichtbar und reagiert auch nicht auf Klicks. So entstehen schräge Kanten, Sechsecke oder Ausschnitte ohne Bildbearbeitung.
Wie funktionieren die Koordinaten bei polygon()?
Jeder Punkt besteht aus x und y in Prozent der Elementgröße, der Ursprung liegt oben links. Die Punkte werden der Reihe nach verbunden. Die Form schließt sich automatisch vom letzten zum ersten Punkt.
Kann ich clip-path animieren?
Ja, solange beide Zustände dieselbe Funktion und dieselbe Zahl an Punkten haben. Dann interpoliert der Browser weich zwischen den Formen, zum Beispiel für Hover-Effekte.
Werden Schatten und Rahmen abgeschnitten?
Ja. clip-path schneidet auch box-shadow und border ab. Für einen Schatten um die Form nutzt du filter: drop-shadow() auf einem umgebenden Element.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.