Клип-путь - CSS-хитрости

Содержание

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
clip-path на MDN
Клиппи: создатель клипа Беннета Фили
Обрезка и маскирование на MDN
Свойство CSS Clip (устарело) (Impressive Webs)
Спецификация CSS-маскирования
CSS Masking от Дирка Шульце
Отсечение в CSS и SVG - свойство и элемент clip-path, автор Сара Суейдан
Ручки с тегами clip-path на CodePen
Демо-версии и демо-версия поддержки браузера Pen от Yoksel
SVG-маски Якоба Дженкова
Исследование Алана Гринблатта об уровнях поддержки браузерами функций обрезки и маскирования

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.