clip-path

Красиво и быстро задаём элементу любую форму при помощи всего одного CSS-свойства.

Время чтения: меньше 5 мин

Кратко

Скопировано

С помощью clip-path можно задавать видимую область элемента. Всё, что выходит за её пределы, скрывается.

Пример

Скопировано

Обрежем изображение до круга:

        
          
          img {  clip-path: circle(50%);}
          img {
  clip-path: circle(50%);
}

        
        
          
        
      

Как пишется

Скопировано

url(SVG)

Скопировано

Задавать область можно с помощью ссылки на SVG url(). Для большей совместимости лучше всего ссылаться на элемент в разметке, а не на отдельный файл. Ссылки на другие домены не работают ни в одном браузере.

        
          
          <div style="clip-path: url(#clip-path)"></div><div style="clip-path: url(doka.svg#clip-path)"></div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 45">  <defs>    <clipPath id="clip-path">        <!-- Тут описание фигуры: path, circle и т. п. -->    </clipPath>  </defs></svg>
          <div style="clip-path: url(#clip-path)"></div>
<div style="clip-path: url(doka.svg#clip-path)"></div>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 45">
  <defs>
    <clipPath id="clip-path">
        <!-- Тут описание фигуры: path, circle и т. п. -->
    </clipPath>
  </defs>
</svg>

        
        
          
        
      
Открыть демо в новой вкладке

Базовая форма

Скопировано

Задавать область можно с помощью следующих CSS функций:

  • inset() — четырёхугольник,
  • circle() — круг,
  • ellipse() — эллипс,
  • polygon() — многоугольник,
  • path() — сложная фигура по правилам заполнения SVG.

inset()

Скопировано

У функции inset() может быть от одного до четырёх аргументов — отступов от краёв. После ключевого слова round можно задать скругление углов, которое работает по тем же правилам, что и шорткат border-radius.

        
          
          div {  clip-path: inset(10% 50px 5rem round 10px 10%);}
          div {
  clip-path: inset(10% 50px 5rem round 10px 10%);
}

        
        
          
        
      
Открыть демо в новой вкладке

circle()

Скопировано

Аргументом функции circle() выступает длина радиуса окружности или одно из ключевых слов: closest-side (в качестве длины радиуса используется расстояние от центра окружности до ближайшего края) или farthest-side (от центра окружности до самого дальнего края). После ключевого слова at можно указать центр фигуры (например, top left или 10%).

        
          
          div {  clip-path: circle(75% at 10px 10%);}
          div {
  clip-path: circle(75% at 10px 10%);
}

        
        
          
        
      
Открыть демо в новой вкладке

ellipse()

Скопировано

CSS-функция ellipse() очень похожа на circle() за исключением того, что у эллипса два радиуса.

        
          
          div {  clip-path: ellipse(4rem farthest-side at top);}
          div {
  clip-path: ellipse(4rem farthest-side at top);
}

        
        
          
        
      
Открыть демо в новой вкладке

polygon()

Скопировано

С помощью polygon() можно задавать многоугольники.

        
          
          div {  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);}
          div {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

        
        
          
        
      
Открыть демо в новой вкладке

path()

Скопировано

Фунция path() — ещё один способ задания видимой области. Поддержка браузеров немного хуже, чем у url().

        
          
          span {  clip-path: path(/* Тут описание фигуры */);}
          span {
  clip-path: path(/* Тут описание фигуры */);
}

        
        
          
        
      
Открыть демо в новой вкладке

Блочная модель

Скопировано

Областью фигуры может стать блочная модель:

  • margin-box — включает отступы,
  • border-box — по заданной рамке,
  • padding-box — по контенту,
  • content-box — по содержимому,
  • fill-box — по ограничивающей рамке объекта,
  • stroke-box — по обводке ограничивающей рамки,
  • view-box — по окну просмотра SVG.

Блочная модель с базовой формой

Скопировано

Можно комбинировать задание видимой области блочной моделью и базовой формой, их порядок не важен. В этом случае все значения для базовой формы будут рассчитываться от заданной блочной модели.

Открыть демо в новой вкладке

Подсказки

Скопировано

💡 Свойство не наследуется.

💡 Значение по умолчанию — none.

💡 Можно анимировать, если область задана с помощью базовой формы.

💡 Свойство заменяет устаревшее свойство clip.

💡 Скрывается не только элемент, к которому применено свойство, но и вложенные в него элементы с псевдоэлементами.