CSS Clip-Path-Generator - Polygon-, Kreis- und Ellipsenformen kostenlos
Generieren Sie CSS clip-path-Werte für Polygon-, Kreis- und Ellipsenformen mit Live-Vorschau und vordefinierten Formen
CSS-Werkzeuge
Tool
Shape Type
Preset Shapes
CSS
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Anleitung
1Wählen Sie einen Formtyp: Polygon, Kreis oder Ellipse
2Für Polygone klicken Sie auf eine vordefinierte Form (Dreieck, Fünfeck, Sechseck, Stern, Pfeil, Kreuz)
3Für Kreis/Ellipse passen Sie die Radiusregler an
4Sehen Sie die Live-Vorschau mit dem Clip auf einem Verlaufselement
5Kopieren Sie den CSS clip-path-Wert und fügen Sie ihn Ihrem Element hinzu
Häufig gestellte Fragen
clip-path ist eine CSS-Eigenschaft, die Teile eines Elements außerhalb der definierten Form abschneidet (verbirgt). Sie unterstützt Polygon-, Kreis-, Ellipsen- und SVG-Pfadformen.
Ja. Alle Prozentwerte in polygon() beziehen sich auf die Begrenzungsbox des Elements, sodass sich die Form automatisch mit der Elementgröße skaliert.
Ja, solange beide Keyframes denselben Formtyp und dieselbe Anzahl von Polygonpunkten verwenden. CSS-Übergänge und -Animationen können nahtlos zwischen zwei clip-path-Werten interpolieren.
clip-path wird in allen modernen Browsern gut unterstützt. Für ältere Browser kann das Präfix -webkit- für Safari-Versionen vor 13 erforderlich sein.