Как в html сделать обтекание картинки текстом

Аватар пользователя Aleksey
Aleksey
06 апреля 2023

Для того, чтобы сделать обтекание текста по контуру картинки с прозрачным фоном в HTML, можно использовать свойство CSS shape-outside.

Необходимо добавить изображение на страницу HTML:

<img src="path/to/image.png" alt="image" class="image" />

Далее, добавить стили CSS для изображения:

.image {
  float: left;
  shape-outside: url('path/to/image.png');
  shape-margin: 20px;
}

Добавляем текст, который будет обтекать изображение:

<div class="text">
  <p>Текст, который будет обтекать изображение.</p>
</div>

Добавляем стили CSS для текста. Скрываем часть текста, которая будет находиться за пределами обтекаемого изображения):

.text {
  overflow: hidden;
}
0 0

Похожие вопросы