clip-path

Свойство 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.