CSS Shapes

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

Оглавление:
  1. shape-outside
  2. polygon()
  3. inset()
  4. round
  5. circle()
  6. closest-side
  7. farthest-side
  8. ellipse()
  9. shape-image-threshold
  10. Границы фигурой
  11. shape-margin
  12. shape-padding
  13. shape-inside
  14. CSS shapes и SVG
  15. Поддержка

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Крым, Белогорский район, с. Зуя
Тел: +7(978)1176627 http://samartsy.ru/

Применить 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.

<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>
div {
	height: 400px;
	width: 400px;
}
.rect {
	shape-outside: url(#rect-shape);
}
.path {
	shape-outside: url(#path-shape);
}
К началу

Поддержка

Таблица поддержки браузерами: “CSS Shapes”

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

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