CSS Shape Outside: обтекание по фигуре

Все привыкли, что текст обтекает элементы по прямоугольнику. Но CSS позволяет задать любую форму для обтекания — через shape-outside.

Как работает
Элемент должен быть float и иметь размеры.
С помощью shape-outside задаём область, вокруг которой будет течь текст.

Пример с кругом:

img {
  float: left;
  width: 200px;
  height: 200px;
  clip-path: circle(50%);
  shape-outside: circle(50%);
  margin: 20px;
}

Текст обтечёт картинку не по квадрату, а по кругу.

Возможные формы
circle() — круг.
ellipse() — эллипс.
polygon() — многоугольник (можно задать любые координаты).
inset() — прямоугольник с возможными скруглениями.
Пример с polygon

.shape {
  float: left;
  width: 250px;
  height: 250px;
  shape-outside: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

Здесь текст будет обтекать фигуру в виде треугольника.

Зачем это нужно
Крутые журнальные макеты прямо в вебе.
Нетривиальная вёрстка без Photoshop.
Можно оживить статьи, блоги и лендинги.

Поддержка в браузерах хорошая (кроме IE и старого Edge). Если хочешь выделиться в дизайне — это мощный инструмент.

#css | #полезности