Как понять свойство clip-path в CSS

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

.card {
  background-color: #77cce9;
  clip-path: circle(80px at 50% 50%);
}

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

Система координат

Прежде чем углубляться в детали clip-path, стоит упомянуть о том, как работает система координат. Начало координат - это верхний левый угол, ось x направлена вправо, а ось y - вниз.

Учитывая это, чтобы увидеть, как обрезается элемент, давайте возьмём простой пример. В нём обрезанная область - это круг размером 100 px, его центр расположен в точке 0,0 (вверху слева).

Обратите внимание, что пользователь видит только выделенную тёмно синюю область. Оставшаяся часть круга обрезана. Вопрос в том, как сделать видимым весь круг? Для этого нужно изменить точки осей x и y.

Центр круга расположен в 100 px левее и 100 px выше. Теперь, когда вы понимаете, как работает система координат, я расскажу о возможных значениях свойства clip-path.

Значения clip-path

- inset

Значение inset определяет вставляемый прямоугольник. Мы можем контролировать четыре края, точно так же, как это делается с краями или отступом. В примере ниже .card имеет свойство inset 20px со всех краёв (сверху, справа, снизу и слева).

.card {
  clip-path: inset(20px);
}

Если нужно, подправьте inset с одного из краёв. Вот пример, как это сделать:

.card {
  clip-path: inset(20px 20px 50px 20px);
}

Выше класс .card имеет свойство inset со значением 50px снизу.

Вопрос в том, возможна ли округлая вставка? Да! Благодаря ключевому слову round. Добавление ключевого слова слева от радиуса округляет углы, вот так: round <border-radius>.

.card {
  clip-path: inset(20px 20px 50px round 15px);
}

Кроме того, мы даже можем настроить радиус каждой стороны отдельно. Вот пример с нулевым радиусом верхнего правого и нижнего левого углов.

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

- circle()

Чтобы использовать значение circle(), нам понадобится радиус и его положение. Вот пример:

.card {
  clip-path: circle(80px at 50% 50%);
}

Радиус окружности равен 80px, и она позиционирована так: 50% на оси x, 50% на оси y.

- ellipse()

С помощью функции ellipse() мы можем установить ширину и высоту, чтобы сделать отсечение овальным

.card {
  clip-path: ellipse(100px 80px at center);
}

- polygon()

Самое интересное для меня значение - polygon(). Можно управлять несколькими наборами значений по осям x и y.

.card {
  clip-path: polygon(x y, x y, x y, x y);
}

Вот пример, где polygon() используется, чтобы обрезать прямоугольник. Обратите внимание, что я сопоставил каждый набор точек с его координатами на осях.

.card {
  clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%);
}

Используя значение polygon(), можно рисовать сложные фигуры с несколькими точками.

- path()

Значение path() позволяет использовать элемент SVG, чтобы обрезать определённую область. Сейчас его поддержка браузером непоследовательна. Чтобы заставить это свойство работать в разных браузерах, нам нужно использовать встроенный SVG, а затем функцию url() как значение для clip-path.

<svg class="svg">
  <clipPath id="triangle" clipPathUnits="objectBoundingBox">
    <path d="M0.05,0.05 h1 v1"></path>
  </clipPath>
</svg>

В коде CSS нужно добавить путь к clipPath при помощи url().

.card {
  clip-path: url("#triangle");
}