inset()

<length-percentage>{1,4}

Если все четыре аргумента заданы, они представляют собой отступы сверху, справа, снизу и слева от базового прямоугольника, определяющие положение границ прямоугольника. Эти аргументы следуют синтаксису сокращенной записи для отступов, что позволяет задать все четыре отступа с помощью одного, двух или четырех значений.

Если сумма пары отступов для измерения превышает 100% от этого измерения, оба значения пропорционально уменьшаются, чтобы их сумма равнялась 100%. Например, значение inset(90% 10% 60% 10%) имеет отступ сверху 90% и отступ снизу 60%. Эти значения пропорционально уменьшаются до inset(60% 10% 40% 10%). Фигуры, которые не содержат области и у которых нет shape-margin, не влияют на обтекание.

<border-radius>

Необязательные аргументы <border-radius> определяют скругленные углы прямоугольника, используя синтаксис сокращенной записи для скругленных углов.

<inset()> = 
  inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )  

<length-percentage> = 
  <length>      |
  <percentage>  

<border-radius> = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

В примере ниже используется фигура inset() для перекрытия содержимого над плавающим элементом. Измените значения смещения, чтобы увидеть, как меняется фигура.

<div class="box">
  <div class="shape"></div>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>

.box {
  width: 400px;
  margin: 0 auto;
}

.shape {
  float: left;
  width: 150px;
  height: 100px;
  clip-path: inset(45px 50px 15px 0 round 50px);
  shape-outside: inset(40px 40px 10px 0 round 50px);
  background-color: coral;
  border-radius: 20px;
  margin: 0;
  padding: 20px;
}

• Свойства, использующие этот тип данных: clip-path, shape-outside
• Модуль CSS shapes
• Руководство по базовым фигурам