clip-path

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

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

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"

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

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

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Задавать область можно базовой формой:

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

Обрежем изображение до формы ромба:

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

        
        
          
        
      

Можно задать область при помощи SVG-источника:

        
          
          img {  clip-path: url(clip.svg#c1);}
          img {
  clip-path: url(clip.svg#c1);
}

        
        
          
        
      

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

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

Обрежем изображение по заданной границе с закруглёнными углами:

        
          
          img {  border-radius: 15px;  clip-path: border-box;}
          img {
  border-radius: 15px;
  clip-path: border-box;
}

        
        
          
        
      

Хотя самая частая область применения — это изображения, но свойство clip-path может ограничивать и другие HTML-элементы, например заголовок:

Обрежет заголовок до вытянутого по горизонтали овала:

        
          
          h1 {  clip-path: ellipse(50% 10%);}
          h1 {
  clip-path: ellipse(50% 10%);
}

        
        
          
        
      

Можно комбинировать все или несколько способов задачи области.

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

        
        
          
        
      

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