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

Question

[sabanovvv]

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

Answer 1

[Тимофей Белоусов]

Вот, только точные значения задашь в px я так на глаз накидал быстро...

Answer 2

[Ilya Korablev]

Посмотрите исходник

Comments

[Serj-One]

Видно, что это кусок макета. О каком исходнике вы говорите?

[asBessonov]

Закрыть часть бордера другим элементом, например спозиционировать псевдоэлемент after таким образом что бы он закрыл собой часть бордера.

Answer 3

[Вячеслав]

так пойдет?:)

Comments

[Тимофей Белоусов]

А как ты фон подставишь под h3?

[Вячеслав]

Тимофей Белоусов: я не вижу там фона, я вижу там белое пространство.
Но и с фоном можно придумать - просто вырезать кусок фона (правда, это будет костыль, а не валидное решение- каждый раз нужен будет разный фон).

[Тимофей Белоусов]

Вячеслав: jsfiddle.net/7yaLtkar/1

[Вячеслав]

Тимофей Белоусов: ++ да, клевенько. :)

Answer 4

[Денис Артемьев]

Я бы наверное сделал h1 к примеру, туда бы поместил красный текст-заголовок.
Потом в css сделал бы фон для него белый (так как именно в нужном нам квадрате белый цвет), задал нужную ширину и z-index.
В общем смысл, этот участок border-а накрыть блоком с белым фоном.

Comments

[Денис Артемьев]

А вообще, по-любому фон картинкой, я бы не заморачивался, а вырезал бы эту рамку вместе с картинкой и сделал бы фоном.

Answer 5

[Владимир Шестаков]

У блока сделал бы бордер слева, справа, снизу, а для верхнего применил псевдоэлементы ::after и ::before, позиционируя их в верхнем левом и правом углу соответственно.

Тимофей Белоусов тоже самое предложил, только он псевдоэлементы к заголовку применил

Comments

[Тимофей Белоусов]

Кстати не плохой вариант, в следующий раз если понадобится такое реализовывать, воспользуюсь вашим вариантом, это будет более правильно!