Кліп-шлях - CSS-хитрощі | Альманах CSS 2025

clip-pathВластивість в CSS дозволяє вказати конкретний регіон елемента для відображення, причому інше приховано (або «підрізані») геть.

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

Раніше була clipвластивість, але зверніть увагу, що вона застаріла.

Найпоширенішим варіантом використання буде зображення, але це не обмежується цим. Ви можете так само легко застосувати clip-pathтег абзацу та лише частину тексту.

 
 I'll be clipped.

Ці чотири значення в inset()(у CSS вище) представляють верхню / ліву точку та нижню / праву точки, що утворює видимий прямокутник. Все поза цим прямокутником приховано.

Це зображення Луї Лазаріса дуже добре пояснює чотири пункти **старого `clip: rect();`синтаксису** .

Інші можливі значення:

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

Приклад шляху до кліпу SVG:

Дуже дивно, що clip-pathця path()функція не підтримувала вихід із воріт, оскільки path()це вже властиво таким властивостям, як motion-path. Firefox зараз має підтримку, і ми чекаємо на решту браузерів. Див. Початкове впровадження clip-path: path ();

Зробіть свій власний

Поки ми не можемо надійно використовувати path(), найкориснішими затискачами для вигадливих нестандартних форм є polygon(). Ось справді акуратний редактор для тих, хто від Мадса Стоумана (який також працює для кіл та еліпсів):

Більше інформації

Відсікання та маскування в CSS
кліп-шлях на WPD
кліп-шлях на MDN
Кліппі: виробник кліп-шляху Беннета Філі
Відсікання та маскування на MDN
Властивість кліпу CSS (застаріле) (вражаючі веб-сайти)
Специфікація CSS Masking
Маскування CSS Дірка Шульце
Відсікання в CSS та SVG - Властивість та елемент кліпу шляху Сари Суейдан
Ручки з міткою кліп-шлях на CodePen
Демонстраційні програми та підтримка браузера демонстраційна версія Pen від Yoksel
SVG Маски Якоба Єнькова
Дослідження Алана Грінблатта щодо рівнів підтримки браузера для відсікання та маскування функцій

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.