css shape-outside Как контролировать обтекание для изображения

Question

Пробую организовать обтекание изображения текстом как показано на рисунке

.best_girl {
  float: right;
  vertical-align: bottom;
  shape-outside: url("../images/box/girl-India.png");
  shape-image-threshold: 0.5;
}

<img class="best_girl" src="images/box/girl-India.png" width="419" height="341" alt="Indian girl" loading="lazy">

Не могу понять почему область тени обтекания в инспектори отображаеться по правому нижнему краю, возможно ли как-то смещать эту область ? (Это не то что мне сейчас надо) * кроме shape-margin: свойства, это тут не подходит. Если нельзя, то может кто-то подсказать как быстро перегнать изображение в path для shape-outside: polygon(...)

Answer 1

Знаю как быстро перегнять изображение в path.

В любом редакторе заливаем нужное изображение черным. Вот так:
Качаем и истанавливаем inkscape
Импортируем черное изображение в inkscape File > Import
Переводим изображение в вектор Path > Trace Bitmap. Откроется окно, в нем можно настроить сглаживание и точность
Смотрим полученный результат в xml редакторе Edit > XML Editor. Или сохраняем в svg

БЛОГ НА HUSL

css shape-outside Как контролировать обтекание для изображения

Ответы (1 шт):