Как сверстать такой элемент?

Question

[floppyman]

Перед тем как задавать вопрос повозился с реализацией, пробовал fieldset>legend, ::before/::after и другие неведомые вещи. Везде сталкиваюсь с тем, что какая-то мелочь не выглядит так как требуется.

Answer 1

[Виталий Инчин ☢]

Я у мамы художник.


Ну ладно, ладно: https://jsfiddle.net/j9052yja/3/

Comments

[Dark Hole]

Углы поправь, видно, что не сплошная

[Виталий Инчин ☢]

Dark Hole, я не стремлюсь дать готовое решение, а всего лишь пытаюсь направить ТС в нужную сторону. Мой вариант не идеален.

Answer 2

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

https://jsfiddle.net/QW01_01/rjyhqeg4/1/
Норм дизайнеры.
Не понимаю, чего тут отвечающие разнылись.

Answer 3

[Александр Гамов]

Руки переставить в нужное место таким дизайнерам )
Либо svg, либо нужно сплошной цвет на бэкграунде.

Comments

[Григорий]

лучше руки переставить!

Answer 4

[Wheelie]

у первого блока :after картинка справа, у второго например :before картинка слева у третьего :after картинка справа.
Текст по центру, картинку позиционированием absolute. Вроде ничего сложного. Картинка это линяя от одного текста до друого.

Comments

[floppyman]

Так фишка еще в том, чтобы эта обводка тянулась блоками которые она обрамляет. С изображениями такой фокус не пройдет.

[Wheelie]

floppyman: пройдет. Если середину вырезать отдельно. По аналогии как верстали во времена, когда даже скругленные уголки делали картинкой.

Answer 5

[Dark Hole]

Мне одному кажется, что это обычный border?! 1 элемент - верхняя, левая и нижняя видны, средний - верхняя, правая, нижняя, нижняя - аналогично верхней. Если хорошо элементы проставить - вообще незаметно, что это border.

Comments

[Alexander Litvinenko]

бордерами два дива на фоне для каждого элемента тут нужны, правый и левый, иначе закругление не выйдет.

[Dark Hole]

Alexander Litvinenko: угу

Answer 6

[Алекс]

Джипегом))А вообще руки оторвать дизайнеру