Как сделать обтекание картинки по форме
Короткий ответ
Сделайте картинку плавающей через float и задайте форму обтекания в shape-outside:
<style>
.round { float: left; width: 120px; height: 120px; object-fit: cover; border-radius: 50%;
shape-outside: circle(50%); shape-margin: 12px; }
p { font: 14px/1.5 system-ui, sans-serif; }
</style>
<img class="round" src="/media/photo-200x200.jpg" alt="A flower">
<p>Flowers have been grown in gardens for thousands of years. Some are valued for their scent, some for their color, and some simply because they bloom when everything else is grey. A small bed of tulips or daisies can change the look of a whole yard. Text here follows the curve of the round photo instead of a straight edge.</p>border-radius скругляет саму картинку, а shape-outside: circle(50%) говорит тексту обтекать круг. Это два разных свойства: одно меняет вид, другое — форму для текста. shape-margin задаёт зазор между фигурой и текстом.
Многоугольник
polygon() принимает точки в процентах. Ту же фигуру удобно передать и в clip-path, чтобы обрезать картинку:
<style>
.tri { float: left; width: 140px; height: 140px; object-fit: cover;
clip-path: polygon(0 0, 100% 0, 0 100%); shape-outside: polygon(0 0, 100% 0, 0 100%); }
p { font: 14px/1.5 system-ui, sans-serif; }
</style>
<img class="tri" src="/media/photo-200x200.jpg" alt="A flower">
<p>The photo is cut into a triangle, and the lines of text get longer as they go down, following its slanted edge. This works for any shape you can describe with points: a diagonal, an arrow or a hexagon.</p>По прозрачности картинки
Вместо фигуры можно передать PNG с прозрачным фоном: shape-outside: url(cat.png). Текст обтечёт непрозрачную часть. Картинка должна быть с того же сайта, иначе браузер её не использует.
Частая ошибка
Задавать shape-outside без float. Свойство работает только у плавающих элементов, у обычной или flex-картинки оно ничего не делает. И у картинки должны быть заданы размеры — иначе фигуре не от чего считать проценты.
Функции из этого ответа
- shape-outside — Задаёт форму, которую обтекает текст рядом с плавающим элементом, — круг, многоугольник или контур картинки.
- float — Прижимает элемент к левому или правому краю, чтобы текст обтекал его.
- clip-path — Обрезает элемент по фигуре: видимой остаётся только часть внутри неё.
- border-radius — Скругляет углы элемента.