CSS clip-path: Eigene Formen fuer das Web Erstellen

Was ist clip-path?

Die CSS-Eigenschaft clip-path definiert einen Beschneidungsbereich, der bestimmt, welche Teile eines Elements sichtbar sind. Alles ausserhalb des Bereichs wird versteckt. Es ist, als wuerden Sie ein Element mit einer Schere in jede beliebige Form schneiden — Kreise, Dreiecke, Sechsecke, Sterne oder voellig eigene Formen.

Im Gegensatz zu overflow: hidden, das nur rechteckig beschneidet, oder border-radius, das auf Ellipsen beschraenkt ist, erlaubt clip-path jede geometrische Form. Es aendert die tatsaechlich sichtbare Flaeche des Elements, einschliesslich seiner Hintergruende, Rahmen und Schatten.

Grundformen

• circle(): clip-path: circle(50% at 50% 50%); — erzeugt einen Kreis. Der erste Wert ist der Radius, at definiert den Mittelpunkt.
• ellipse(): clip-path: ellipse(40% 60% at 50% 50%); — eine Ellipse mit separaten horizontalen und vertikalen Radien.
• inset(): clip-path: inset(10% 20% 30% 40%); — ein Rechteck, eingerueckt von den Kanten. Unterstuetzt auch round fuer abgerundete Ecken.
• polygon(): clip-path: polygon(50% 0%, 100% 100%, 0% 100%); — ein Dreieck. Beliebig viele Punkte moeglich fuer jede polygonale Form.

Kreative Anwendungen

Diagonale Sektionen

Diagonale Schnitte zwischen Sektionen brechen das Raster auf: clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);. Das erzeugt einen schraegen unteren Rand.

Sechseck-Bilder

Profilbilder oder Portfolio-Thumbnails als Sechsecke statt der ueblichen Kreise: clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Text-Reveal-Effekte

Kombiniert mit CSS-Transitionen koennen Sie Inhalte in jeder Form einblenden — ein Kreis, der sich von der Mitte aus ausdehnt, oder ein Vorhang, der sich von links oeffnet.

clip-path animieren

clip-path laesst sich mit CSS-Transitionen und -Animationen animieren, solange Ausgangs- und Zielform denselben Typ und dieselbe Anzahl von Punkten verwenden. Ein Polygon mit vier Punkten kann zu einem anderen Polygon mit vier Punkten uebergehen, aber nicht zu einem Kreis.

Beispiel fuer einen Hover-Effekt:

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

SVG-Pfade verwenden

Fuer Formen, die ueber einfache Polygone hinausgehen, koennen Sie SVG-Pfade referenzieren: clip-path: url(#meinPfad);. Definieren Sie den Pfad in einem inline SVG mit <clipPath>-Element. Das erlaubt Kurven, Boegen und jede denkbare Form.

Formen erstellen

Unser clip-path Generator ermoeglicht es Ihnen, Formen visuell zu erstellen. Verschieben Sie Punkte, sehen Sie das Ergebnis in Echtzeit und kopieren Sie den CSS-Code direkt in Ihr Projekt.