Свойство clip-path


Свойство clip-path
в CSS позволяет указать конкретную область элемента для отображения, а остальная часть скрыта (или “обрезана”).
.clip-me {
/* Пример: отрезать элемент от верхнего, правого, нижнего и левого краев */
clip-path: inset(10px 20px 30px 40px); /* или "none" */
/* Пример: вырезание элемента в семиугольник */
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
/* Устаревшая версия */
position: absolute; /* требуется абсолютное или фиксированное позиционирование */
clip: rect(110px, 160px, 170px, 60px); /* или "auto" */
/* значения описывают верхнюю/левую точку и нижнюю/правую точку */
}
Раньше существовало свойство
clip
, но обратите внимание, что оно устарело.
Наиболее распространенным вариантом использования было бы изображение, но этим дело не ограничивается. Вы могли бы так же легко применить clip-path
к тегу абзаца и только к части текста.
<img class="clip-me" src="/images/image-to-be-clipped.png" alt="Descriptioin of image">
<p class="clip-me">
Я буду обрезан.
</p>
Эти четыре значения в inset()
(в приведенном выше CSS) представляют верхнюю / левую точку и нижнюю / правую точку, которые образуют видимый прямоугольник. Все, что находится за пределами этого прямоугольника, скрыто.

clip: rect();
синтаксиса.Другие возможные значения:
.clip-me {
/* ссылка на путь из встроенного SVG */
clip-path: url(#c1);
/* путь ссылки из внешнего SVG*/
clip-path: url(path.svg#c1);
/* многоугольник */
clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
/* окружность */
clip-path: circle(30px at 35px 35px);
/* элипс */
clip-path: ellipse(65px 30px at 125px 40px);
/* inset-rectangle() может заменить inset() ? */
/* rectangle() в ближайшей SVG 2 */
/* закругленные углы ... не уверен, что вещь больше */
clip-path: inset(10% 10% 10% 10% round 20%, 20%);
}
Пример пути к клипу SVG:
<clipPath id="clipping">
<circle cx="150" cy="150" r="50" />
<rect x="150" y="150" width="100" height="100" />
</clipPath>
Очень странно, что clip-path
не поддерживалась path()
функция out of the gate, поскольку path()
это уже относится к таким свойствам, как motion-path
. В Firefox теперь есть поддержка для этого, и мы ждем остальных браузеров.
Создайте свой собственный
Пока мы не сможем надежно использовать path()
, наиболее полезными клипами для необычных пользовательских форм являются polygon()
. Вот действительно удобный редактор, который также работает с кругами и эллипсами: