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

Question

[Dan2013]

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

Answer 1

[Фин Дел]

например вот-так

Comments

[Dan2013]

Написано Сайт codepen.io не позволяет установить соединение.

[Фин Дел]

Dan2013,

[Исмайл Мынжасар]

Фин Дел, добрый человек, переписал на JSFiddle.

[Фин Дел]

Исмайл Мынжасар, спасибо, всегда рад помочь

Answer 2

[Максим]

Поясню
Есть родительский элемент
Есть два внутренних элемента

У родителя нету нижнего border'а его мы формируем за счёт псевдоэлемента - если бордер 4px то и высота after тоже 4px

Answer 3

[profesor08]

Порежь чувака. И расположи половинки как нужно, используй z-index чтоб перекрыть верхний бордер.

Answer 4

[edwin_edwin]

Вижу 2 варианта:
1. Вырезать в фотошопе голову и задать ей z-index больше, чем у border.
2. Если мужик на отдельном слое, то сделать верхнюю линию и оставшуюся часть разными элементами и для верхней линии задать z-index меньше, чем z-index мужика

Comments

[granty]

Каска и лямочки имеют более яркую палитру, чем остальная фотка. И каска сильно смещена влево.

Судя по этому, там не голова вырезана, а только каска с боковыми лямочками (которые вдоль щёк). Тогда будет скрадываться смещение при наложении каски поверх головы (если оно возникнет).

Имхо - в оригинале реализован ваш вариант 1. Хотя логичнее - вырезать всего мужика, тогда смещение будет вообще по барабану.

[Lord_Dantes]

Крипово так-то голову вырезать. Можно еще не полагаться на ТС и мало ли голова слетит..

[edwin_edwin]

s l a v e, вырезать человека целиком как вариант.