Свойство CSS shape-outside
Свойство CSS shape-outside позволяет оборачивать контент вокруг заданной формы. Значения и примеры использования.
CSS-свойство shape-outside задаёт форму, вокруг которой оборачивается соседний строчный контент (как правило, текст). Оно позволяет выйти за рамки прямоугольной блочной модели и обтекать текст по кругу, эллипсу, многоугольнику или даже по силуэту изображения.
По умолчанию строчный контент обтекает прямоугольный margin box плавающего элемента. Свойство shape-outside заменяет этот прямоугольник произвольной формой, и текст следует кривым и углам вместо прямых сторон.
На этой странице рассматривается назначение shape-outside, принимаемые значения (<basic-shape>, <shape-box> и <image>), запускаемые примеры для каждого случая и подводные камни, о которых нужно знать, чтобы свойство работало.
Когда и зачем использовать
Используйте shape-outside, когда нужно, чтобы текст облегал непрямоугольный объект — например, параграф вокруг круглого аватара, треугольной цитаты или вырезанной фотографии товара. Это исключительно визуальное, презентационное свойство: оно изменяет поток текста, а не фактическую геометрию элемента. Сам элемент остаётся прямоугольным блоком.
Необходимо помнить три правила:
- Элемент должен быть плавающим.
shape-outsideдействует только на плавающие элементы (float: leftилиfloat: right). На неплавающие элементы оно не оказывает никакого эффекта. - Элемент должен иметь ширину и высоту. Форма
<basic-shape>, напримерcircle(), рассчитывается относительно блока элемента, поэтому у блока должны быть явно заданные размеры. shape-outsideне обрезает элемент. Оно изменяет только область обтекания, которую текст обходит. Чтобы визуально обрезать блок по той же форме, используйте свойствоclip-pathс той же функцией формы (это показано в примерах ниже).
Анимации и переходы могут воздействовать на shape-outside, когда значение является <basic-shape>.
| Начальное значение | None |
|---|---|
| Применяется к | Любому элементу. |
| Наследуется | Нет. |
| Анимируемое | Да, как задано для <basic-shape>. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.shapeOutside = "margin-box"; |
Синтаксис
shape-outside: none | <shape-box> | <basic-shape> | <image> | initial | inherit;Сопутствующее свойство shape-margin добавляет отступ между формой и обтекающим текстом, а shape-image-threshold задаёт пороговое значение непрозрачности пикселей изображения, когда используется значение <image>.
Пример: обтекание текста вокруг эллипса
Функция формы ellipse() принимает два радиуса и необязательную позицию. Обратите внимание, как clip-path использует то же значение, чтобы видимый зелёный блок соответствовал форме, вокруг которой оборачивается текст.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
shape-outside: ellipse(120px 200px at 40% 50%);
clip-path: ellipse(120px 200px at 40% 50%);
width: 300px;
height: 500px;
float: right;
opacity: 0.6;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Shape-outside property example</h2>
<div></div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Пример: обтекание текста вокруг изображения
Когда значением является url(), указывающий на изображение, браузер строит форму на основе альфа-канала изображения — область обтекания следует непрозрачным пикселям. Это работает только для изображений, доступных через CORS, и изображение должно иметь прозрачность, чтобы эффект был виден.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
width: 250px;
shape-outside: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
}
.left {
float: left;
}
.right {
float: right;
}
</style>
</head>
<body>
<h2>Shape-outside property example</h2>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="tree" class="left" />
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="tree" class="right" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Пример: обтекание текста вокруг многоугольника
Функция polygon() принимает список пар координат x y, задающих вершины формы. Используйте её для треугольников, стрелок или любого произвольного контура с тремя и более точками.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
shape-outside: polygon(0 0, 0 200px, 300px 600px);
clip-path: polygon(0 0, 0 200px, 300px 600px);
width: 300px;
height: 300px;
float: left;
opacity: 0.3;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Shape-outside property example</h2>
<div></div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| none | Форма не применяется. Область обтекания элемента не изменяется. |
<shape-box> | Область обтекания определяется по форме краёв плавающего элемента. <shape-box> может принимать одно из четырёх значений: margin-box, border-box, padding-box, content-box. Скруглённые углы в форме задаются свойством border-radius. |
<basic-shape> | Область обтекания определяется функцией формы: inset() для вписанных прямоугольников, circle() для кругов, ellipse() для эллипсов и polygon() для любой формы с тремя и более вершинами. |
<image> | Форма извлекается и определяется на основе альфа-канала указанного <image>. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Частые ошибки
- Ничего не происходит, если элемент не плавающий. Это самая распространённая ошибка.
shape-outsideмолча игнорируется безfloat: leftилиfloat: right. - Блок по-прежнему выглядит прямоугольным.
shape-outsideизменяет только область обтекания, а не внешний вид элемента. Добавьте соответствующийclip-path, если нужно визуально обрезать блок по той же форме. - Проценты рассчитываются относительно блока элемента, поэтому у элемента без высоты (или с нулевой высотой) форма не будет соответствовать ожиданиям.
- Используйте
shape-marginдля отступа. Текст может вплотную прилегать к краю формы;shape-marginдобавляет равномерный зазор.
Поддержка браузерами
shape-outside поддерживается во всех современных браузерах (Chrome, Edge, Firefox, Safari и Opera). Деградация происходит корректно: в браузере без поддержки текст просто обтекает прямоугольный блок элемента.
Связанные свойства
float— обязательно для действияshape-outside.border-radius— скругляет углы значения<shape-box>, которым следуетshape-outside.