Свойство clip-path

MasterNik / 07 апреля 2023 г. / 1743 / Время чтения

Свойство 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(). Вот действительно удобный редактор, который также работает с кругами и эллипсами: