Создавайте интересные фигуры изображений с помощью свойства CSS clip-path.

Использование обрезки в CSS может помочь нам избавиться от того, чтобы все в наших проектах выглядело как коробка. Используя различные базовые фигуры или SVG, вы можете создать контур обрезки. Затем отрежьте части элемента, которые вы не хотите показывать.

Rachel Andrew

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

В приведенном выше примере изображение воздушного шара имеет квадратную форму ( источник ). Используя clip-path и базовое значение формы circle() дополнительное небо вокруг воздушного шара обрезается, оставляя на странице круглое изображение.

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

Отсечение можно применить к любому элементу HTML, а не только к изображениям. Есть несколько разных способов создания clip-path , в этом посте мы их рассмотрим.

Совместимость с браузером

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

@supports(clip-path: circle(45%)) {
  /* code that requires clip-path here. */
}

Основные формы

Свойство clip-path может принимать несколько значений. В первом примере использовалось значение circle() . Это одно из основных значений фигуры, которые определены в спецификации CSS Shapes . Это означает, что вы можете обрезать область, а также использовать то же значение для shape-outside , чтобы текст обтекал эту фигуру.

Полный список основных фигур:

• inset()
• circle()
• ellipse()
• polygon()

inset()

Значение inset() вставляет обрезанную область от края элемента и может передавать значения для верхнего, правого, нижнего и левого краев. Также можно добавить border-radius , чтобы изогнуть углы обрезанной области, используя ключевое слово round .

В моем примере у меня есть два ящика с классом .box . Первый блок не имеет обрезки, второй обрезается с использованием значений inset() .

circle()

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

Следите за плоскими краями!

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

ellipse()

Эллипс, по сути, представляет собой сплющенный круг и поэтому действует очень похоже на circle() но принимает радиус для x и радиус для y, а также значение для центра эллипса.

polygon()

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

Чтобы помочь вам создавать полигоны и посмотреть, на что они способны, воспользуйтесь Clippy , генератором clip-path , а затем скопируйте и вставьте код в свой собственный проект.

Фигуры из значений поля

В CSS Shapes также определены фигуры из значений блоков . Они относятся к блочной модели CSS — поле содержимого, поле заполнения, поле границы и поле поля со значениями ключевых слов content-box , border-box , padding-box и margin-box .

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

.box {
  clip-path: content-box;
}

В этом примере круг будет использовать content-box в качестве поля ссылки, а не margin-box (которое используется по умолчанию).

.box {
  clip-path: circle(45%) content-box;
}

В настоящее время браузеры не поддерживают использование значений поля для свойства clip-path . Однако они поддерживаются для shape-outside .

Использование элемента SVG

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

Анимация вырезанной области

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

Существует множество творческих способов использования анимации с обрезкой. Анимация с помощью clip-path в CSS Tricks реализует некоторые идеи.

Фото Мэтью Генри на сайте Burst.