Фигуры в CSS

В течение долгого времени CSS имел значительные ограничения, когда дело касалось создания фигур, отличных от квадратов / прямоугольников. Со временем стали популярными некоторые хитрые приемы для создания различных форм, большинство из которых требовало от нас возиться с такими вещами, как границы, преобразования или абсолютное позиционирование. Однако эти уловки не позволяли нам создавать настоящие "журнальные" макеты для наших страниц (другими словами: заставлять текст окружать эти формы неквадратным образом).

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

Проблема

Давай посмотрим на очень распространенный макет:

В вышеприведенной макете нет ничего неправильного. Действительно, это широко используемый способ отображения изображения вместе с текстом. Вот весь CSS код, что нужно для отображения изображения:

Теперь давай воспользуемся традиционным подходом, чтобы сделать это изображение округлым, с помощью свойства border-radius:

Посмотри, как это выглядит сейчас:

Конечный результат далек от того, что мы видим в реальных статьях. Само изображение имеет правильную форму, но текст вокруг него ведет себя так, как будто он все еще окружает квадрат (и, на самом деле, это так). Это то, что мы решим, используя фигуры CSS.

Свойство clip-path

Первое свойство, которое мы будем использовать, это clip-path. Как следует из названия, он обрезает элемент в соответствии с заданной формой. Технически свойство clip-path не является частью модуля CSS Shapes Level 1, вместо этого оно принадлежит к модулю CSS Masking Module Level 1. Однако это свойство часто комбинируется с CSS Shapes, и ты поймешь причину ниже.

Давай изменим наш простой пример, чтобы использовать clip-path вместо border-radius:

Результат:

Подожди... в чем разница? Ну, нет никакой. По крайней мере, пока нет.

CSS Shapes: свойство shape-outside

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

Свойство shape-outside принимает те же значения, что и clip-path (одна из главных причин того, что эти свойства так хорошо работают вместе).

И вот что он дает:

Красиво, не правда ли? Теперь наш макет выглядит намного лучше. Другой способ объяснить свойство shape-outside заключается в том, что оно позволяет тебе определять настраиваемую плавающую область для элемента вместо его прямоугольного формата по умолчанию.

Другие формы CSS

В наших предыдущих примерах использовалась очень простая фигура, чтобы проиллюстрировать, как работают фигуры CSS. А теперь давай посмотрим, что мы можем сделать:

Эллипс

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

Ты можешь контролировать его размер, используя свойства ширины и высоты.

Врезка

С помощью inset мы можем создавать прямоугольные формы с настраиваемым интервалом вставки:

Как видишь, эта форма определяет плавающую область, которая меньше исходной. Таким образом, текст перекрывает стилизованный элемент. Этот интервал вставки можно настроить, задав аргумент функции inset.

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

Если тебе нужно что-то особенное, тебе понадобится многоугольник. Функция многоугольника принимает список экранных координат (в формате x и y), что позволяет нам создавать практически любую форму, которую мы хотим. Давай посмотрим на несколько примеров:

Поплавки с обеих сторон

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

CSS Shapes: свойство shape-margin

Чтобы добавить поле к фигуре, ты можешь использовать свойство shape-margin:

Поддержка браузера

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

Завершение

• В течение многих лет, frontend-разработчики использовали несколько приемов для создания геометрических фигур в CSS. Помимо того, что эти формы являются своего рода "костылями", они не позволят создать богатый макет, как мы видим в реальных статьях.
• Свойство clip-path, как следует из названия, обрезает элемент, маскируя все, что находится за пределами его контура.
• С другой стороны, свойство shape-outside контролирует, как содержимое, окружающее элемент, будет плавать вокруг него. Обычно это свойство используется вместе с clip-path.
• Если твое приложение должно поддерживаться только основными вечнозелеными браузерами, ты можешь использовать CSS Shapes уже сегодня!

Источник: https://programmingwithmosh.com/css/understanding-css-shapes/