От автора: все элементы на веб-страницах определены в прямоугольной рамке. Однако это не значит, что мы должны делать все блоками. Вы можете использовать свойство CSS clip-path, чтобы вырезать части изображения или другого элемента и создать интересные эффекты.
В приведенном выше примере изображение воздушного шара квадратное (источник). Использование clip-path со значением базовой фигуры circle() обрезает изображение, оставляя сам воздушный шар и часть неба вокруг него.
Поскольку изображение является ссылкой, вы можете увидеть еще кое-что, касающееся объекта clip-path. Кликнуть можно только по видимой области изображения, поскольку события не срабатывают на скрытых частях изображения.
Отсечение можно применить к любому элементу HTML, а не только к изображениям. Есть несколько разных способов создать clip-path, в этом посте мы рассмотрим их.
Совместимость с браузерами
Помимо значений box, как описано далее в этом посте, различные продемонстрированные значения clip-path имеют отличную поддержку браузерами. Для устаревших браузеров запасным вариантом может быть разрешить браузеру игнорировать свойство clip-path и отображать необрезанное изображение. Если это проблема, вы можете проверить clip-path в запросе функции и предложить альтернативный макет для неподдерживающих браузеров.
@supports(clip-path: circle(45%)) { /* code that requires clip-path here. */
}
Основные фигуры
Свойство clip-path может принимать несколько значений. В начальном примере использовалось значение circle(). Это одно из значений основных фигур, которые определены в спецификации CSS Shapes. Это означает, что вы можете вырезать область, а также использовать то же значение для shape-outside, чтобы текст обтекал эту фигуру.
Обратите внимание, что фигуры CSS можно применять только к обтекаемым элементам. Для свойство clip-path не требуется обтекаемый элемент. Полный список основных фигур:
inset()
circle()
ellipse()
polygon()
inset()
Значение inset() вставляет обрезанную область от края элемента, и могут быть переданы значения для верхней, правой, нижней и левой кромок. Также можно добавить border-radius, чтобы изогнуть углы вырезанной области с помощью ключевого слова round.
В моем примере у меня есть два блока с классом .box. Первый прямоугольник не имеет отсечения, второй отсекается с использованием значений inset().
circle()
Как вы видели, значение circle()создает круглую обрезанную область. Первое значение — это длина или процент и радиус круга. Второе необязательное значение позволяет вам установить центр круга. В приведенном ниже примере я использую значения ключевых слов, чтобы установить обрезанный кружок вверху справа. Вы также можете использовать длину или проценты.
Остерегайтесь плоских краев!
Помните, что при использовании всех этих значений фигура будет обрезана по блоку элемента. Если вы создадите на изображении круг, и эта фигура будет выходить за пределы естественного размера изображения, вы получите плоский край.
ellipse()
Эллипс — это, по сути, сжатый круг, и поэтому он действует очень похоже на circle(), но принимает радиус для x и радиус для y, плюс значение для центра эллипса.
polygon()
Значение polygon() может помочь вам создавать довольно сложные фигуры, определяя столько точек, сколько вам нужно, путем установки координат каждой точки.
Чтобы помочь вам создавать многоугольники и увидеть, что возможно, попробуйте генератор clip-path Clippy, а затем скопируйте и вставьте код в собственный проект.
Фигуры значения box
В CSS Shapes также определены фигуры значения box. Они относятся к Блочной модели 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;
}
В настоящее время браузеры не поддерживают использование значений box для свойства clip-path. Однако они поддерживаются shape-outside.
Использование элемента SVG
Для большего контроля над обрезанной областью, чем это возможно с помощью базовых фигур, используйте элемент SVG. Затем укажите его идентификатор, используя url() в качестве значения для clip-path.
Анимация обрезанной области
CSS-переходы и анимация могут быть применены к объекту clip-path для создания интересных эффектов. В следующем примере я анимирую круг при наведении курсора, переходя между двумя кругами с другим значением радиуса.
Автор: Rachel Andrew
Источник: https://web.dev
Редакция: Команда webformyself.
