Klipová cesta - Triky CSS | Almanach CSS 2025

clip-pathVlastnosť CSS umožňuje určiť špecifickú oblasť prvku na displeji, pričom zvyšná časť bola skrytá (alebo "pripnutý") preč.

.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 */ )

Predtým tu bola clipnehnuteľnosť, ale je to zastarané.

Najbežnejším prípadom použitia by bol obrázok, ale nie je to obmedzené iba na tento prípad. Rovnako ľahko môžete použiť clip-pathznačku odseku a iba časť textu.

 
 I'll be clipped.

Tieto štyri hodnoty v inset()(v CSS vyššie) predstavujú horný / ľavý bod a dolný / pravý bod, ktoré tvoria viditeľný obdĺžnik. Všetko mimo tohto obdĺžnika je skryté.

Tento obrázok Louisa Lazarisa veľmi dobre vysvetľuje štyri pointy **starej `clip: rect();`syntaxe** .

Ďalšie možné hodnoty:

.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%); )

Príklad cesty klipu SVG:

Je veľmi čudné, že clip-pathnepodporovala path()funkciu mimo brány, pretože path()pre vlastnosti typu to už je vec motion-path. Prehliadač Firefox ho však teraz podporuje a čakáme na ďalšie prehľadávače. Viď Počiatočná implementácia clip-path: path ();

Vytvorte si vlastný

Kým dokážeme spoľahlivo použiť path(), sú najužitočnejšie klipy pre efektné vlastné tvary polygon(). Tu je skutočne úhľadný editor pre editorov od Mads Stoumann (ktorý funguje aj pre kruhy a elipsy):

Viac informácií

Orezávanie a maskovanie v CSS
clip-path na WPD
clip-path na MDN
Clippy: výrobca klipartových dráh Bennetta Feelyho
Orezávanie a maskovanie na MDN
(Zastaraná) vlastnosť klipu CSS (pôsobivé weby)
Spec on CSS Masking
CSS Masking od Dirka Schulzeho
Clipping in CSS and SVG - The Clip-path Property and Element od Sary Soueidan
Perá označili príchytku na CodePen
Ukážky a podpora prehliadača, demo Pen od spoločnosti Yoksel
Masky SVG od Jakoba Jenkova
Výskum Alana Greenblatta o úrovniach podpory prehľadávačov pre funkcie orezávania a maskovania

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.