Обрезка изображений в CSS с помощью clip-path

Development | Amber | Комментировать запись

clip-path — очень интересное свойство CSS. Оно позволяет обрезать видимую часть элементов SVG, HTML и изображений.

Определение базовых фигур с помощью clip-path

clip-path позволяет легко вырезать основные фигуры, используя ключевые слова (polygon, ellipse, circle), которые являются частью модуля CSS exclusion.

Многоугольник

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

Проиллюстрируем это на примере. Сначала идет исходное изображение, а затем – изображение, модифицированное с помощью clip-path, благодаря которому оно примет форму треугольника, затем более сложную формы X и, наконец, форму звезды:

/* Triangle */
.polygon1 {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* X */
.polygon2 {
  -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
/* Star */
.polygon3 {
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

Круг

Круг можно определить при помощи следующего синтаксиса:

circle(radius at posX posY)

Расположение опционально, по умолчанию это 50% 50%. Давайте рассмотрим такой пример:

.circle {
  -webkit-clip-path: circle(50%);
  clip-path: circle(50%);
}
.circle2 {
  -webkit-clip-path: circle(70% at 70% 20%);
  clip-path: circle(70% at 70% 20%);
}

Эллипс

Эллипсы определяются при помощи такого синтаксиса:

ellipse(radiusX radiusY at posX posY)

Расположение снова опционально и по умолчанию сводится к 50% 50%. Вот примеры:

.ellipse {
  -webkit-clip-path: ellipse(50% 35%);
  clip-path: ellipse(50% 35%);
}
.ellipse2 {
  -webkit-clip-path: ellipse(50% 65% at 70% 50%);
  clip-path: ellipse(50% 65% at 70% 50%);
}

Логическая вставка

С помощью логической вставки можно определить внутренний прямоугольник, а все, что снаружи, будет вырезано. Это позволяет легко эффективно обрезать изображения или элементы прямо в браузере. Вы также можете закруглить края прямоугольника с помощью ключевого слова round:

.inset {
  -webkit-clip-path: inset(20% 25% 20% 10%);
  clip-path: inset(20% 25% 20% 10%);
}
.inset2 {
  -webkit-clip-path: inset(45% 0% 33% 10% round 10px);
  clip-path: inset(45% 0% 33% 10% round 10px);
}

Анимация и переход

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

Следующие правила CSS заставят наше исходное изображение менять форму:

.trigger-btn:hover + img {
  animation: magic 4s infinite;
}

@keyframes magic {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  20% {
    -webkit-clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
    clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
  }
  40% {
    -webkit-clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
    clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
  }
  60% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
    clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
  }
  80% {
    -webkit-clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
    clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }

}

Произвольные формы SVG

Вы также можете определить любую произвольную форму и присвоить ее как значение clip-path. Начать работу можно с такого инструмента, как Sketch, – в нем вы можете создать свою фигуру, а затем скопировать разметку SVG в текстовый редактор. В разметке SVG просто оберните фигуру в элемент clipPath, а затем оберните clipPath в блок defs.

Например:

<svg width="0" height="0">
  <defs>
    <clipPath id="my-shape">
      <path d="M89.6342913,129 C86.6318679,137.611315 85,146.865086 85,156.5 C85,200.767808 119.448105,236.989829 163,239.821749 L163,300 L300,300 L300,163 L251.750745,163 C251.915896,160.855015 252,158.687329 252,156.5 C252,110.384223 214.615777,73 168.5,73 C146.712501,73 126.873981,81.3445721 112.006052,95.0121046 L64.5,0 L0,129 L89.6342881,129 Z">
      </path>
    </clipPath>
  </defs>
</svg>

Теперь вы можете применить свою фигуру в качестве значения clip-path, используя ключевое слово url и идентификатор формы SVG:

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

Итоги

Попробуйте также Clippy – это отличный инструмент, помогающий определить значения для свойства clip-path.

На данный момент свойство clip-path поддерживается 95% браузеров по всему миру. Однако при его использовании следует обязательно включать варианты с префиксом -webkit-clip-path, которые по-прежнему необходимы для Safari.

Читайте также: Как работает SVG-атрибут preserveAspectRatio