Обтекание элемента в середине абзаца
Предположим, что вы хотите, чтобы изображение визуально обтекалось текстом слева. Но в середине абзаца, а не сверху.
Для этого нужно вставить изображение в середину абзаца:
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing
<img src="tree.jpg" alt="An oak tree." />
elit. Similique quibusdam aliquam provident suscipit
corporis minima? Voluptatem temporibus nulla
</p>Но что делать с атрибутом alt? В середине предложения не может быть случайного текста. Это семантически неверно и буквально сбивает с толку людей, использующих вспомогательные технологии. Поэтому необходимо разместить изображение перед абзацем.
<img src="tree.jpg" alt="An oak tree." />
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Similique quibusdam aliquam provident suscipit
corporis minima? Voluptatem temporibus nulla
</p>Но тогда изображение располагается сверху абзаца. Использование свойства margin просто увеличит высоту отступа, а функция translate () отобразит изображение сверху текста.
Хитрость заключается в использовании shape-outside и polygon() для изменения формы обтекания. Для этого можно использовать сервис Clippy.
Вы применяете это значение к shape-outside. Но для изображения нужен цвет фона. В приведенном ниже примере я немного поэкспериментировал.