CSS-фигуры

По умолчанию текст обтекает плавающее изображение по прямоугольнику, даже если на картинке круглое фото или вырезанный предмет на прозрачном фоне. Справа от круглого портрета остаётся пустой угол, и вёрстка выглядит «квадратной». Модуль CSS Shapes позволяет описать настоящую форму, и строки начинают подходить к ней вплотную, как в журнальной вёрстке.

Как задать форму обтекания

Главное свойство — shape-outside. Оно принимает:

• circle() и ellipse() — круг и эллипс;
• inset() — прямоугольник со скруглением и отступами внутрь;
• polygon() — многоугольник по списку точек;
• url(image.png) — контур по прозрачности картинки, порог задаёт shape-image-threshold.

Свойство shape-margin добавляет зазор между формой и текстом. Важно, что shape-outside меняет только обтекание, а саму картинку не обрезает. Чтобы видимая форма совпала с контуром, её дополнительно подрезают через border-radius или контур обрезки clip-path.

Пример: текст вокруг круглого фото

.author-photo {
  float: left;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  shape-outside: circle(50%);
  shape-margin: 16px;
}

Фотография эксперта в статье становится круглой, а строки абзаца огибают её по дуге с зазором 16 пикселей. Без последних двух строк текст обходил бы фото по квадрату.

Ограничения

• Работает только у плавающих элементов. Для блоков во Flexbox или Grid свойство не действует.
• Форма по картинке через url() требует, чтобы изображение было с того же домена или отдавалось с разрешающими заголовками CORS. Иначе браузер проигнорирует контур.
• На узком экране обтекание часто мешает: рядом с фото остаётся колонка в два-три слова. Обычно в медиазапросе для телефонов float отключают, и картинка встаёт над текстом. Если же обтекание оставляют, контейнеру с текстом может понадобиться очистка обтекания.

Браузер, не знающий свойство, просто покажет обычное прямоугольное обтекание — страница не сломается.