CSS Clip-Path Maker
Ziehen Sie Punkte auf der Leinwand, um Ihren Clip-Path zu gestalten. Wählen Sie Voreinstellungen und kopieren Sie CSS.
① Preset wählen oder Griffe ziehen ② Zwischen polygon, circle und ellipse wechseln ③ CSS kopieren
FormvoreinstellungenModus
CSS-Ausgabe
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
Was ist CSS clip-path?
Die CSS-Eigenschaft clip-path erstellt einen Clipping-Bereich, der steuert, welcher Teil eines Elements sichtbar ist. Mit polygon() definieren Sie prozentuale Koordinatenpaare für eine geschlossene Form. circle() und ellipse() ermöglichen kreisförmige oder ovale Ausschnitte. clip-path ist vollständig hardwarebeschleunigt und kann mit CSS-Transitions animiert werden.
Häufig gestellte Fragen
clip-path ist eine CSS-Eigenschaft, die den sichtbaren Bereich eines Elements auf eine definierte Form beschränkt. Nur Pixel innerhalb des Clip-Bereichs werden gerendert. Verwendet für kreative Abschnitte, Bildmasken und animierte Übergänge.
Jedes Wertepaar in polygon() ist eine (x%, y%)-Koordinate relativ zum Bounding Box des Elements. (0% 0%) ist die obere linke Ecke, (100% 100%) die untere rechte.
polygon() akzeptiert beliebig viele Koordinatenpaare für geradlinige Formen. circle(r at cx cy) erstellt einen kreisförmigen Ausschnitt. ellipse(rx ry at cx cy) einen ovalen. Alle akzeptieren Prozentwerte.
.el { clip-path: polygon(...); transition: clip-path 0.5s ease; } .el:hover { clip-path: polygon(...); }. Der Browser interpoliert jedes Koordinatenpaar. Unterschiedliche Punktanzahlen können nicht animiert werden.
clip-path mit polygon(), circle() und ellipse() ist vollständig in Chrome, Edge, Firefox und Safari ohne Präfixe unterstützt. Globale Unterstützung über 97%.
Diagonale Abschnittsteiler, Bildgalerien mit sechseckigen Masken, animierte Hero-Enthüllungen, gerätförmige Video-Overlays, interaktive Kartenregionen.
CSS clip-path wird direkt auf HTML-Elemente angewendet und ist leicht zu animieren. SVG <clipPath> wird im SVG-Markup definiert und über clip-path: url(#id) referenziert. SVG unterstützt komplexe Pfade und Text als Masken.