CSS Clip Path Generator
Generieren Sie interaktiv CSS clip-path Formen: Polygon, Kreis und Ellipse. Ziehen Sie Eckpunkte, wählen Sie Voreinstellungen wie Pfeil oder Stern und kopieren Sie den CSS clip-path Wert.
Presets
Preview (drag points)
BG:
Vertices (3)
1
x
y
2
x
y
3
x
y
CSS Output
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
So verwenden Sie CSS Clip Path Generator
- 1Wählen Sie einen clip-path Typ: Polygon, Kreis oder Ellipse.
- 2Wählen Sie eine voreingestellte Form oder ziehen Sie die Kontrollpunkte, um eine benutzerdefinierte Form zu erstellen.
- 3Kopieren Sie den CSS clip-path Wert zur Verwendung in Ihrem Stylesheet.
ZenovayAnalytics
Wissen Sie, was Ihre Besucher wirklich tun.
- Besucher-Tracking in Echtzeit
- Datenschutz zuerst, kein Cookie-Banner
- In zwei Minuten eingerichtet
Verwandte Tools
CSS Gradient Generator
Erstellen Sie schöne CSS-Gradienten mit einem visuellen Editor. Lineare, radiale und konische Gradienten.CSS Box Shadow Generator
Entwerfen Sie CSS Box Shadows mit visuellen Steuerelementen. Passen Sie Offset, Unschärfe, Ausbreitung und Farbe an.CSS Border Radius Generator
Erstellen Sie benutzerdefinierte Border-Radius-Werte mit visuellen Steuerelementen. Verknüpfen oder trennen Sie Ecken für schnelle Anpassungen.CSS Flexbox Playground
Erlernen und generieren Sie CSS Flexbox Layouts visuell. Passen Sie Richtung, Ausrichtung, Umbruch und Lücke in Echtzeit an.Häufig gestellte Fragen
Was ist CSS clip-path?▾
clip-path beschneidet ein Element auf eine bestimmte Form. Alles außerhalb der Form wird ausgeblendet. Unterstützte Werte: polygon(x1 y1, x2 y2, ...): benutzerdefiniertes Polygon mit Eckpunkten als Prozentwerte. circle(radius at cx cy): Kreis. ellipse(rx ry at cx cy): Ellipse. inset(top right bottom left round radius): eingefügtes Rechteck. path("SVG path"): SVG-Pfad. Beispiel: clip-path: polygon(50% 0%, 0% 100%, 100% 100%) erstellt ein Dreieck. CSS clip-path hat das veraltete SVG clipPath für die meisten Anwendungsfälle ersetzt. Browser-Unterstützung: alle modernen Browser. Verwenden Sie den Vendor-Prefix -webkit-clip-path für Safari < 14.
Was sind gängige clip-path-Formmuster?▾
Dreieck oben: polygon(50% 0%, 0% 100%, 100% 100%). Dreieck unten: polygon(0% 0%, 100% 0%, 50% 100%). Sechseck: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). Pfeil rechts: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%). Stern: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%). Pentagon: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%). Chevron: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%).
Wie interagiert clip-path mit border-radius?▾
clip-path überschreibt border-radius visuell – border-radius existiert noch im Box-Modell, aber clip-path blendet die Ecken aus, sodass border-radius unsichtbar wird. Wenn Sie abgerundete Formen möchten, verwenden Sie: inset(0 round 10px) für ein abgerundetes Rechteck. circle() und ellipse() sind von Natur aus glatt. Für abgerundete Polygone verwenden Sie CSS basic shape polygon() kombiniert mit der noch experimentellen corner-shape-Eigenschaft. Eine Lösung: Wenden Sie border-radius auf ein Kind-Element innerhalb des beschnittenen Containers an. Sowohl clip-path als auch border-radius beeinflussen Klick-/Hover-Bereiche.
Kann ich CSS clip-path animieren?▾
Ja! clip-path unterstützt CSS-Übergänge und Animationen zwischen Formen mit der gleichen Anzahl von Punkten. Beispiel: element { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition: clip-path 0.5s ease; } element:hover { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } Beide Formen müssen die gleiche Anzahl von Polygon-Eckpunkten haben für eine glatte Interpolation. Bei Formen mit unterschiedlicher Eckpunktzahl wechseln sie ohne Interpolation. Tipp: Fügen Sie beiden Formen extra Mittelpunkt-Eckpunkte hinzu, um Interpolation zwischen unterschiedlich geformten Polygonen zu ermöglichen.
Was ist der Unterschied zwischen clip-path und mask?▾
clip-path: verwendet eine geometrische Form (Polygon, Kreis, SVG-Pfad). Der beschnittene Bereich ist vollständig ausgeblendet. Scharfe Kanten. Hohe Leistung (GPU-beschleunigt). mask: verwendet ein Bild oder Farbverlauf. Weiß = sichtbar, Schwarz = ausgeblendet, Grau = halbtransparent. Ermöglicht weiche Kanten, Farbverläufe und komplexe Masken. mask-image: linear-gradient(to right, transparent, black) erzeugt einen Verblassungseffekt. Verwenden Sie clip-path für harte geometrische Formen (diagonale Abschnitte, Dreiecke, Sechsecke). Verwenden Sie mask für weiche Effekte, Ausblendungen und bildbasierte Masken. Beide akzeptieren dieselbe SVG-Pfad-Syntax.