Основные фигуры с shape-outside

Тип <basic-shape> используется в качестве значения для всех основных фигур. Этот тип представляет собой функциональную запись: скобки функции содержат аргументы, используемые для описания фигуры.

Принимаемые аргументы зависят от создаваемой фигуры. Мы рассмотрим их в примерах ниже.

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

На скриншоте ниже показан инспектор фигур Firefox, отображающий координатную систему окружности, созданной с помощью shape-outside: circle(50%). Элемент имеет 20 пикселей отступа, рамки и отступов. Инспектор фигур выделяет эти координатные системы.

По умолчанию координатная система для базовой фигуры — margin-box. На скриншоте видно, что фигура определена относительно этой части модели блока.

Хотя по умолчанию используется margin-box, ее можно изменить. Чтобы установить другую координатную систему, добавьте нужное значение блока после определения вашей базовой фигуры.

Эти две объявления идентичны:

shape-outside: circle(50%);
shape-outside: circle(50%) margin-box;

Чтобы ваша фигура использовала другую координатную систему, включите другое значение <box-edge>, например, чтобы использовать границу как координатную систему для нашей окружности, задайте:

.shape {
  shape-outside: circle(50%) border-box;
}

Фигуры, которые выходят за пределы области отступов, будут обрезаны до области отступов. Это демонстрируют следующие базовые фигуры.

Более подробное объяснение координатных систем в контексте фигур CSS см. в Understanding reference boxes for CSS shapes.

Функция inset() определяет прямоугольник. Это может показаться не очень полезным, так как плавающее значение без фигур даст вам прямоугольник вокруг него. Однако тип inset() позволяет определить смещения, тем самым перетягивая текст вокруг уменьшенного прямоугольника над частями плавающего элемента.

Функция inset() принимает до четырёх значений смещения по сторонам, плюс необязательное ключевое слово round, за которым следует значение border-radius. Следующий CSS создаёт прямоугольную фигуру со смещением от координатной системы плавающего элемента на 20 пикселей сверху и снизу и на 10 пикселей слева и справа, со значением border-radius равным 10 пикселям.

.shape {
  float: left;
  shape-outside: inset(20px 10px 20px 10px round 10px);
}

Значения смещения используют те же правила, что и сокращенная запись margin. Четыре значения, разделённые пробелами, определяют смещение сверху, справа, снизу и слева — в указанном порядке. Вы также можете задавать несколько смещений одновременно:

• Если есть только одно значение, оно применяется ко всем сторонам.
• Если есть два значения, верхнее и нижнее смещение устанавливаются на первое значение, а правое и левое смещение — на второе.
• Если есть три значения, верхнее устанавливается на первое значение, левое и правое — на второе, а нижнее — на третье.

Поэтому вышеуказанные правила также можно записать как:

.shape {
  float: left;
  shape-outside: inset(20px 10px round 10px);
}

В примере ниже у нас есть фигура inset() для перетягивания содержимого над плавающим элементом. Измените значения смещений, чтобы увидеть, как меняется фигура.

Вы также можете добавить значение блока в качестве альтернативной координатной системы. В примере ниже попробуйте изменить координатную систему с margin-box на border-box, padding-box, или content-box, чтобы увидеть, как изменяется используемая координатная система в качестве отправной точки перед вычислением смещений.

Вы также можете создавать прямоугольники, основанные на расстояниях от верхнего и левого краёв координатной системы, с помощью функции rect(), или по ширине и высоте с помощью функции xywh(); обе также поддерживают необязательные скругленные углы.

Значение circle() для shape-outside может принимать два возможных аргумента: радиус, определяющий размер, и <position> определяющий его положение.

Значения circle() и ellipse() shape-outside оба принимают <shape-radius> в качестве аргумента. Это может быть <length>, <percentage>, или одно из ключевых слов closest-side или farthest-side.

Ключевое слово closest-side использует расстояние от центра фигуры до ближайшей стороны координатной системы для создания длины радиуса. Ключевое слово farthest-side использует расстояние от центра фигуры до наиболее удалённой стороны координатной системы.

Второй аргумент — position, который принимает значение <position> с одним или двумя ключевыми словами, чтобы указать положение центра окружности. Это указывается так же, как и background-position; если одно или оба значения опущены, значения по умолчанию — center.

Для создания окружности мы указываем значение радиуса, необязательно дополнив ключевым словом at и значением позиции. В этом примере окружность применена к элементу <img> с width и height значениями 210px и margin соответственно. Это даёт общую ширину координатной системы 250px. Значение 50% для <shape-radius> означает, что радиус — 125px. Значение позиции установлено в 30%, что равно 30% от левого края и по умолчанию по вертикали center.

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

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

Как отмечено в координатных системах выше, область отступов margin-box обрезает фигуру. Вы можете увидеть это, переместив центр нашей окружности к содержанию, установив позицию в 60%. Центр окружности будет ближе к содержимому, и окружность будет выходить за пределы области отступов. Это означает, что расширение будет обрезано и обретено квадратную форму.

img {
  float: left;
  shape-outside: circle(50% at 60%);
}

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

После них могут следовать одно или два значения <position> как и в circle(), чтобы определить положение центра эллипса. В примере ниже у нас есть эллипс с x радиусом 40%, y радиусом 50% и <position> установлен в left. Это означает, что центр эллипса находится в центре левого края координатной системы. Это создаёт фигуру полуэллипса, вокруг которого будет перетекать текст. Вы можете изменить эти значения, чтобы увидеть, как изменяется эллипс.

Ключевые слова closest-side и farthest-side полезны для быстрого создания эллипса, основанного на размере координатной системы плавающего элемента.

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

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

Чтобы создать ещё более сложные фигуры, можно определить контур любой фигуры с помощью функций path() или shape().

inset(), circle(), ellipse(), и polygon() можно проверить и изменить с помощью инструмента Shape Inspector в Firefox Developer Tools. На скриншоте ниже показана выделенная фигура в инструменте.

Ещё один ресурс — Clippy, инструмент для создания фигур с примерами, использующими свойство CSS clip-path, которое использует те же базовые функции и значения фигур, что и свойство shape-outside.