CSS-Clip-Pfad-Generator

Die fünf Formfunktionen

Häufige polygonale Clips

/* Sechseck */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Raute */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / Pfeil nach rechts */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallelogramm */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Diagonaler Schnitt (moderne Hero-Sektion) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

Der diagonale Hero-Bereich ist wahrscheinlich der am häufigsten verwendete, er verleiht einem Abschnitt diesen modernen, schrägen Look ohne SVG.

Animieren von clip-path

Clip-path animiert, solange beide Zustände die gleiche Formfunktion mit der gleichen Anzahl von Punkten haben. Ein Polygon mit 4 Eckpunkten animiert reibungslos zu einem anderen Polygon mit 4 Eckpunkten; das Hinzufügen oder Entfernen von Eckpunkten unterbricht die Interpolation.

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

Verwenden Sie dies für Enthüllungseffekte, subtile Hover-Verzerrungen oder Seitenübergänge.

Clip-path vs. overflow: hidden

overflow: hidden schneidet auf das Border-Box-Rechteck (das mit border-radius abgerundet werden kann). clip-path schneidet auf jede von Ihnen definierte Form und schneidet alles, einschließlich Schatten und Umrisse. Wenn Sie möchten, dass Schatten außerhalb der Form sichtbar bleiben, ist clip-path nicht das, was Sie wollen.

filter: drop-shadow() kann einen formverfolgenden Schatten auf clip-path-Elementen wieder hinzufügen, ist jedoch langsamer.

Leistung

Clip-path wird in modernen Browsern GPU-beschleunigt, sodass animierte clip-paths flüssig sind. Die Ausnahme sind path() und sehr komplexe Polygone (40+ Eckpunkte), die in einigen Browsern auf CPU-Rendering zurückfallen.

Barrierefreiheit

Clip-path ändert nur, was sichtbar ist. Bildschirmleser, Tastaturfokus und Zeigerereignisse folgen dem vollständigen Kasten des Elements, nicht der ausgeschnittenen Form. Wenn ein Bild in einen Stern ausgeschnitten ist, wird der Alt-Text normal gelesen. Wenn ein Button in einen Chevron ausgeschnitten ist, ist sein Klickziel das vollständige Rechteck, nicht der sichtbare Chevron, was versehentliche Klicks auf scheinbar leeren Raum verursachen kann.

Für Schaltflächen mit ungewöhnlich ausgeschnittenen Formen setzen Sie die Breite/Höhe des Elements eng, damit die Trefferfläche vernünftig mit dem sichtbaren Bereich übereinstimmt.