Как сверстать такой блок?

Question

[Александр Мартинец]

Доброго времени суток. Подскажите, как сверстать этот блок. Если конкретнее то меня интересует белый бордер. Картинкой я его вставить не могу, потому что иконка и надписи управляются через cms и могут быть разными из-за этого и разрыв в бордере может быть в разных местах и разных размеров.

Comments

[Lord_Dantes]

Сверстать родителя элемента, задать padding-top пикселей насколько выступает изображение. Далее сделать еще одного родителя для блока, внутри картинка, у картинки png-border прозрачный, картинка должна выступать за border 2-го родителя. Таким образом получаем выход с картинки. Текст внизу можно сделать через legend

Answer 1

[RAX7]

Сделать для каждой иконки маску и применить эту маску к верхнему бордеру.

Comments

[Vadim Rublev]

Получается, картинка обведена SVG-контуром?

[RAX7]

Vadim Rublev, да, это контур является маской для верхнего бордера.

[Vadim Rublev]

Так этот контур должен автосоздаваться. Вручную для множества картинок замучаешься делать (а если они ещё заранее неизвестны?). Как он автосоздаётся?

[RAX7]

Vadim Rublev, можно использовать контур той же иконки с добавлением белой обводки. Но такая маска будет местами просвечивать.

[Vadim Rublev]

Нуу.., так себе способ...

В общем, универсального решения тут нет. Чтобы было чётко-красиво надо ручками таки шевелить. Полный автомат не выдумаешь.
Можно на контрасте ловить линию в месте пересечения с границей, но это только если контраст гарантированно есть. Либо ловить границу изображения (а это SVG-картинка, судя по виду) на уровне границы. Либо накладывать SVG-линию-границу на рисунок перед вставкой в этого родителя (точно зная координаты боковых границ родителя, чтобы линия_с_картинкой легла как граница).
В любом случае должен быть решён вопрос с координатами габарита картинки в месте пересечения с границей родителя. Т. к. это SVG-картинки, это решаемо. Конкретный способ - дело техники. (Выходит, можно автомат сделать... видимо...)
:)