CSS Shapes

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

Применить CSS Shapes.

shape-outside

Определит форму обтекания вокруг границы области:

img {
// текст обтекает изображение с правой стороны не соблюдая границы
  float: left;
  shape-outside: inset(1% round 45%);
}
к меню ↑

polygon()

Принимает значение координат для создания любой формы. Координаты могут быть в пикселях или в процентах.

shape-outside: polygon(x1 y1, x2 y2, x3 y3, x4 y4, x5 y5);

Фигура тестом:

shape-inside: polygon(0px, 150px);
Инструмент CSS Shapes для построения произвольной формы
Инструмент CSS Shapes для построения формы

Инструмент CSS Shapes Editor построит любую фигуру. Простой онлайн-инструмент Polygon Drawing создаст форму многоугольника.

к меню ↑

inset()

Определит прямоугольник внутри обтекаемой области.

shape-outside: inset(10px, 5px, 10px, 5px);

функция inset() заменит внутренние и внешние отступы.

Прямоугольник с отступом в 1% от границ элемента:

shape-outside: inset(1%);
к меню ↑

round

Закруглить углами с учетом отступа от края на 1%:

shape-outside: inset(1% round 10px);

Закруглить на 45%:

shape-outside: inset(1% round 45%);

Закруглить каждый угол по разному. Верхний левый угол закруглён на 5px, верхний справа 10px, справа внизу 5px, и внизу слева 5px:

shape-outside: inset(1% round 5px 10px 5px 5px);
к меню ↑

circle()

Обтекание текста по кругу:

shape-outside: circle();

Радиус круга указывается в первый аргумент функции circle().

По умолчанию радиус круга 50% от ширины изображения:

shape-outside: circle(50%);

25% от половины ширины обтекаемой области:

shape-outside: circle(25%);
к меню ↑

closest-side

Вычисляет радиус окружности от края элемента ближе к центру. По сути circle() эквивалентен circle(closest-side).

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

Аргумент closest-side для функции circle() делает круг плотно прилегающим к центру изображения.

Для прямоугольного элемента:

shape-outside: circle(closest-side);
к меню ↑

farthest-side

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

shape-outside: circle(farthest-side);

Когда круг не точно в центре области, можно сместить центр круга словом.

Если область овальная, сместить в левой части области высоту, которая совпадает с высотой элемента:

shape-outside: circle(farthest-side at left);

Применить разные значения для изменения положения центра круга.

CSS position:

shape-outside: circle(closest-side at center);
shape-outside: circle(closest-side at 10% 10%);
shape-outside: circle(closest-side at center);

Указав радиус окружности можно добиться нужного положения центра круга. Для эксперимента создайте полукруг в половину меньше ширины, центр которого находится от левого края 0, а сверху 25%:

shape-outside: circle(25% at 0 25%);
к меню ↑

ellipse()

Для применения этой функции область должна быть эллипс.

shape-outside: ellipse();

Значения для радиуса по оси X и оси Y.

Селать форму эллипса разного размера:

shape-outside: ellipse(25% 10%);

Определить ширину и высоту значениями closest-side и farthest-side:

shape-outside: ellipse(closest-side closest-side);

Методы для смещения центра эллипса и смещение центра круга одинаковые:

shape-outside: ellipse(25% 10% at 0 25%);
к меню ↑

shape-image-threshold

Определить обтекаемую область для непрозрачных изображений в формате PNG, SVG или GIF:

shape-outside: url(img.png);
shape-image-threshold: 0.0;

shape-image-threshold определяет уровень непрозрачности, значения такие же как в свойстве CSS opacity.

В примере, часть изображения непрозрачная поэтому значение 0.0:

Свойство shape-image-threshold
Свойство shape-image-threshold для изображения

удостоверьтесь, что это на удаленном веб-сервере, чтобы избежать какой-либо путаницы над тем, почему это не работает.

к меню ↑

Границы фигурой

Еще один способ определить обтекаемую область это указать границы для блока. Также можно закруглить углы границ для определения обтекаемой области.

Картинка ниже показывает различные модели границ.

Модели границ для блока
Модель границ блока
  • Синяя граница — margin-box. Отступ от элемента снаружи границ блока.
  • Черная граница — border-box. Граница вокруг блока 2px.
  • Оранжевая зона — padding-box. Граница находится в самом блоке.
  • Само изображение находится в content-box.

Применить границы для обтекаемой области:

shape-outside: margin-box;
shape-outside: border-box;
shape-outside: padding-box;
shape-outside: content-box;

Закруглить углы как с inset, но немного проще в реализации и в обслуживании. Этот код добавит отступ 5px между изображением и текстом, обтекание текста будет вокруг изображения у которого радиус углов 150px:

border-radius: 150px;
margin: 5px;
shape-outside: margin-box;

Тот же эффект будет с border-box, padding-box и content-box — меняется только расположение текста.

к меню ↑

shape-margin

Текст возле изображения без значений.

Можно использовать значение длины (например px, em, rem и др.), проценты, или значение функции calc().

Несколько примеров:

shape-margin: 10px;
shape-margin: 1em;
shape-margin: 5%;
shape-margin: calc(2em - 1px);
к меню ↑

shape-padding

Применяется для отступа внутри фигуры.

свойство принимает только положительные значения.

к меню ↑

shape-inside

Область для элемента определяется путем исключения содержания.

Синтаксис:

shape-inside: auto | outside-shape | [ <basic-shape> || shape-box ] | <image>

исключения формы за пределами области содержания не имеют никакого эффекта.

Значение:

auto — форма определяется на основе содержимого блока элемента.
basic-shape — форма определяется на основе значений одной из функций: inset(), circle(), ellipse(), polygon().

к меню ↑

CSS shapes и SVG

Форму для исключения в содержании веб-страницы можно определить с помощью SVG.

CSS

div {
	height: 400px;
	width: 400px;
}
.rect {
	shape-outside: url(#rect-shape);
}

.path {
	shape-outside: url(#path-shape);
}

HTML

<svg height="200" width="200">
    <rect id="rect-shape" width="200" height="200" fill="none"/>
	<path id="path-shape" d="M 100 100 L 300 100 L 200 300 z" />
</svg>

<div class="rect"><p>текст</p></div>
<div class="path"></div>
к меню ↑

Поддержка

Полифил для браузеров от компании adobe.

Больше о спецификации CSS Shapes: