shape-outside

/* Keyword values */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* Function values */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* Shape box with basic shape */
shape-outside: circle() border-box;
shape-outside: margin-box ellipse();

/* <url> value */
shape-outside: url(image.png);

/* <gradient> value */
shape-outside: linear-gradient(45deg, #fff 150px, red 150px);

/* Global values */
shape-outside: inherit;
shape-outside: initial;
shape-outside: revert;
shape-outside: revert-layer;
shape-outside: unset;

Свойство shape-outside задаётся значениями из списка ниже, которые определяют _область обтекания_ для _элементов с плавающим расположением_. Область обтекания определяет форму, вокруг которой инлайновый контент (элементы с плавающим расположением) будет обтекаться.

none

Область обтекания не изменяется. Инлайновый контент обтекает рамку элемента, как обычно.

<shape-box>

Область обтекания вычисляется в соответствии с формой границ плавающего элемента (как определено в модели CSS-ящика). Она может быть margin-box, border-box, padding-box, или content-box. Форма включает любые кривизны, созданные свойством border-radius (поведение подобно background-clip).

margin-box

Определяет форму, ограниченную внешним краем отступа. Радиусы углов этой формы определяются соответствующими значениями border-radius и margin. Если коэффициент border-radius / margin равен 1 или больше, то радиус угла рамки border-radius + margin. Если коэффициент меньше 1, то радиус угла рамки border-radius + (margin * (1 + (ratio - 1) ^ 3)).

border-box

Определяет форму, ограниченную внешним краем границы. Форма следует стандартным правилам формирования радиусов границ для внешней части границы.

padding-box

Определяет форму, ограниченную внешним краем отступа. Форма следует стандартным правилам формирования радиусов границ для внутренней части границы.

content-box

Определяет форму, ограниченную внешним краем содержимого. Каждый радиус угла этого ящика — большее из значений 0 или border-radius - border-width - padding.

<basic-shape>

Область обтекания вычисляется на основе формы, созданной функцией inset(), circle(), ellipse() или polygon(); другие функции <basic-shape> недействительны. Если также указан <shape-box> , он определяет ссылку на область для функции <basic-shape>. В противном случае область ссылки по умолчанию — margin-box.

<image>

Область обтекания извлекается и вычисляется на основе альфа-канала указанного <image>, как определено в shape-image-threshold.

shape-outside = 
  none                              |
  [ <basic-shape> || <shape-box> ]  |
  <image>                           

<shape-box> = 
  <visual-box>  |
  margin-box    

<image> = 
  <url>       |
  <gradient>  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

HTML

<div class="main">
  <div class="left"></div>
  <div class="right"></div>
  <p>
    Sometimes a web page's text content appears to be funneling your attention
    towards a spot on the page to drive you to follow a particular link.
    Sometimes you don't notice.
  </p>
</div>

CSS

.main {
  width: 530px;
}

.left,
.right {
  background-color: lightgray;
  height: 12ex;
  width: 40%;
}

.left {
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
}

.right {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: center;
}

Результат

• Фигуры CSS
• Обзор фигур
• <basic-shape>
• shape-margin
• shape-image-threshold