Clip-Pfad - CSS-Tricks

Inhaltsverzeichnis

Mit der clip-pathEigenschaft in CSS können Sie einen bestimmten Bereich eines anzuzeigenden Elements angeben, während der Rest ausgeblendet (oder "abgeschnitten") wird.

.clip-me ( /* Example: clip away the element from the top, right, bottom, and left edges */ clip-path: inset(10px 20px 30px 40px); /* or "none" */ /* Example: clip element into a Heptagon */ clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); /* Deprecated version */ position: absolute; /* absolute or fixed positioning required */ clip: rect(110px, 160px, 170px, 60px); /* or "auto" */ /* values descript a top/left point and bottom/right point */ )

Früher gab es eine clipEigenschaft, aber beachten Sie, dass sie veraltet ist.

Der häufigste Anwendungsfall wäre ein Bild, aber es ist nicht darauf beschränkt. Sie können genauso gut clip-pathauf ein Absatz-Tag und nur einen Teil des Textes anwenden .

 
 I'll be clipped.

Diese vier Werte in inset()(im obigen CSS) repräsentieren den oberen / linken Punkt und den unteren / rechten Punkt, der das sichtbare Rechteck bildet. Alles außerhalb dieses Rechtecks ist verborgen.

Dieses Bild von Louis Lazaris erklärt die vier Punkte der **alten `clip: rect();`Syntax** sehr gut.

Andere mögliche Werte:

.clip-me ( /* referencing path from an inline SVG */ clip-path: url(#c1); /* referencing path from external SVG */ clip-path: url(path.svg#c1); /* polygon */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* circle */ clip-path: circle(30px at 35px 35px); /* ellipse */ clip-path: ellipse(65px 30px at 125px 40px); /* inset-rectangle() may replace inset() ? */ /* rectangle() coming in SVG 2 */ /* rounded corners… not sure if a thing anymore */ clip-path: inset(10% 10% 10% 10% round 20%, 20%); )

Beispiel für einen SVG-Clippfad:

Es ist sehr seltsam, dass clip-pathdie path()Funktion von Anfang an nicht unterstützt wurde , da dies path()bereits eine Sache für Eigenschaften wie ist motion-path. Firefox unterstützt dies jetzt und wir warten auf den Rest der Browser. Siehe Eine erste Implementierung von clip-path: path ();

Mach dein eigenes

Bis wir es zuverlässig verwenden können path(), sind die nützlichsten Clips für ausgefallene benutzerdefinierte Formen polygon(). Hier ist ein wirklich netter Editor für diejenigen von Mads Stoumann (der auch für Kreise und Ellipsen funktioniert):

Mehr Informationen

Ausschneiden und Maskieren in CSS
Clip-Pfad auf WPD
Clip-Pfad auf MDN
Clippy: Bennett Feelys Clip-Path-Maker
Clipping und Masking auf MDN
Die (veraltete) CSS-Clip-Eigenschaft (beeindruckende Webs)
Spezifikation zur CSS-Maskierung
CSS Masking von Dirk Schulze
Clipping in CSS und SVG - Die Clip-Path-Eigenschaft und das Element von Sara Soueidan
Stifte markiert den Clip-Pfad auf CodePen
Demos und Browser unterstützen Demo Pen von Yoksel
SVG Masken von Jakob Jenkov
Alan Greenblatts Forschung zu Browser-Unterstützungsstufen für Clipping- und Maskierungsfunktionen

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.