Clip-path - CSS-Tricks | Almanach CSS 2025

clip-pathNieruchomość w CSS pozwala określić obszar konkretnego elementu na ekranie, a reszta jest ukryta (lub „obcięte”) z dala.

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

Kiedyś istniała clipwłaściwość, ale pamiętaj, że jest ona przestarzała.

Najczęstszym przypadkiem użycia byłby obraz, ale nie jest to ograniczone do tego. Równie łatwo można zastosować clip-pathznacznik akapitu i tylko część tekstu.

 
 I'll be clipped.

Te cztery wartości w inset()(w powyższym CSS) reprezentują górny / lewy punkt i dolny / prawy punkt, który tworzy widoczny prostokąt. Wszystko poza tym prostokątem jest ukryte.

Ten obraz autorstwa Louisa Lazarisa bardzo dobrze wyjaśnia cztery punkty **starej `clip: rect();`składni** .

Inne możliwe wartości:

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

Przykładowa ścieżka klipu SVG:

To bardzo dziwne, że clip-pathnie obsługuje path()funkcji poza bramą, ponieważ path()jest to już kwestia właściwości takich jak motion-path. Firefox obsługuje go teraz i czekamy na pozostałe przeglądarki. Zobacz wstępną implementację clip-path: path ();

Zrobić własny

Dopóki nie możemy niezawodnie używać path(), najbardziej przydatnymi klipsami do fantazyjnych niestandardowych kształtów są polygon(). Oto naprawdę zgrabny edytor dla tych od Madsa Stoumanna (który działa również dla okręgów i elips):

Więcej informacji

Obcinanie i maskowanie w CSS
clip-path na WPD
clip-path na MDN
Clippy: kreator ścieżek klipów Bennetta Feely'ego
Przycinanie i maskowanie na MDN
(Przestarzała) Właściwość klipu CSS (Impressive Webs)
Specyfikacja maskowania CSS
Maskowanie CSS autorstwa Dirka Schulze
Przycinanie w CSS i SVG - właściwość i element clip-path autorstwa Sary Soueidan
Długopisy otagowane clip-path w CodePen
Dema i obsługa przeglądarek demo Pen by Yoksel
Maski SVG autorstwa Jakoba Jenkowa
Badania Alana Greenblatta na temat poziomów obsługi przeglądarek dla funkcji obcinania i maskowania

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.