clip-path

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Задавать область можно с помощью ссылки на 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() может быть от одного до четырёх аргументов — отступов от краёв. После ключевого слова round можно задать скругление углов, которое работает по тем же правилам, что и шорткат border-radius.

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Аргументом функции 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%);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

С помощью 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() — ещё один способ задания видимой области. Поддержка браузеров немного хуже, чем у 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.

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