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