Свойство clip-path предназначено для вырезания из элемента заданной части в форме фигуры. Область отсечения задается в качестве значения свойства. Таким образом все, что будет вне области отсечения - будет невидимо.

В качестве наглядного примера работы свойства рассмотрим два блока: первый обычный с картинкой на фоне, а второй - такой же, но с примененным свойством clip-path, которое выполняет его обрезку в форме звезды.

Как работает свойство clip-path

Свойство имеет следующий синтаксис:

.polygon {
  clip-path: <значение>;
}

Значением свойства может быть либо функция, описывающая простую геометрическую фигуру, либо путь к SVG, описывающему более сложную форму. Параметрами функции являются координаты или конкретные величины в зависимости от типа функции. Начало системы координат, относительно которой вырисовывается обрезающая блок фигура, находится в левом верхнем углу, а направление осей будет вправо (ось X) и вниз (ось Y).

Давайте обрежем наш блок кругом. Для этого, например, укажем следующее свойство CSS:

.circle {
  clip-path: circle(80px at 110px 85px);
}

Свойство считает это значение так - блок с классом .circle должен быть обрезан кругом с радиусом 80px, центр которого расположен на расстоянии 110px по оси X (т.е. с левого края) и 85px по оси Y (т.е. с верхнего края). Таким образом мы увидим следующую картину (серый фон добавлен для иллюстрации обрезанного места):

Обрезка простыми фигурами

Кроме рассмотренного выше примера круга, свойство clip-path позволяет обрезать блоки такими фигурами, как эллипс, прямоугольник и многоугольник. Значения, указанные в параметрах функций могут иметь любые единицы измерения.

circle

Синтаксис круга может быть как простым (circle(50%) - просто указывает его радиус, центр круга будет в центре блока), так и составным (circle(50% at 20% 20%) - указывается радиус и координата центра).

ellipse

Синтаксис эллипса схож с кругом, кроме одного - первый параметр должен состоять из двух величин: радиус по оси X и радиус по оси Y. Координаты центра указываются по желанию.

inset

Этой функцией можно определить прямоугольник с опцией закругления углов, который выражается величиной отступа границ от краев блока.

Например, значение inset(50px) обрежет блок прямоугольником, стороны которого сформированы отступами по 50px от каждой из граней; inset(20px 30px 40px 50px) обрежет блок прямоугольником, стороны которого сформированы отступами 20px 30px 40px и 50px сверху, справа, снизу и слева соответственно. Радиус указывается следующим параметром после ключевого слова round по правилам свойства border-radius.

polygon

Параметрами этой функции являются координаты, из которых формируется многоугольник. Точки фигуры, выраженные координатами по осям X и Y, записываются через запятую и могут быть как описаны вручную, так и взяты из готовых наборов различных ресурсов (напр. bennettfeely).

Обрезка сложной фигурой

Для определения пользовательской фигуры и применения ее в качестве обрезки блока, в HTML-коде необходимо указать SVG, clipPath которого будет той самой сложной фигурой.

Пример кода SVG:

<svg width="0" height="0">
  <clipPath id="my-shape">
    <path d="M89.6342913,129 C86.6318679,137.611315 85,146.865086 85,156.5">
    </path>
  </clipPath>
</svg>

В CSS достаточно будет обратиться к id необходимого clipPath:

.svg-shape {
  clip-path: url(#my-shape);
}

Если пофантазировать на тему разнообразия фигур для обрезки блоков, можно сгенерировать подобные примеры: