Реально такой border сверстать?

Question

[Римский]

Здравствуйте. Подскажите пожалуйста, реально такой border сверстать или нет вариков?

Answer 1

[Александр Синицын]

Верхний ряд можно сделать из двух колонок, и поставить у них нужные бордеры.
Типа codepen.io/a_u_sinitsin/pen/XpJrGQ

Comments

[Римский]

Спасибо. Муторный вариант но рабочий))

[Александр Синицын]

Виталий: Можно ещё по канве линиями нарисовать ))

Answer 2

[Ярослав Иванов]

https://jsfiddle.net/space2pacman/0dkfqmmv/4/

Comments

[Римский]

Спасибо. Бэкграунд не подходит.

[Ярослав Иванов]

Виталий: Почему ? вы проблему объясните сначала.

[Римский]

Ниже картинка есть clip2net.com/s/3G6ivU5

[Ярослав Иванов]

Виталий: Поправил ответ.

[Римский]

Спасибо решил данный вопрос в связке background-color: #fff; и :after

[Ярослав Иванов]

Виталий: Ну я это и предложил

[Ярослав Иванов]

Виталий: Обновил ответ. Зачем бэкграунд ?

[Римский]

Ярослав Иванов: Для себя определил данный вариант наиболее подходящим. Бэкграунд перекрывает вырхних бордер, а левый бордер через after

Answer 3

[kahi4]

Зависит от фона. Если фон всегда белый, то просто у "языки" напишите background-color: #fff;
Если же нет, то чуть сложнее, через before и after. Вот пример набросал: https://jsfiddle.net/50pdy7y1/

Comments

[Римский]

Спасибо. Примерно так решил данный вопрос. В связке с background-color: #fff; и :after. Да проблема именно в том, что цвет не только белый, в общем костыли решили)

Answer 4

[Ilaj Osmanov]

Да. Это обычный бордер, только поверх него заголовок с background висит

Comments

[Римский]

Увы но нет

Answer 5

[dom1n1k]

Как верно сверстать такую карточку товара?
codepen.io/dom1n1k/pen/gwOQYd