Как правильно сверстать?

Question

[Eugene Chefranov]

Подскажите как правильно сверстать вот такие фоновые квадраты в виде обводки которые уходят из центрального контейнера и уходят за экран. И такая же ситуация с полоской у заголовка.

Answer 1

[Александр Севиринов]

В этом помогут псевдоэлементы ::before и ::after
Изображение оборачиваем в div (например с классом .image-box)
обертке назначаем position: relative
и добавляем псевдоэлемент (например .image-box::before)
псевдоэлементу назначаем position: absolute
Дальше сам...

о псевдоэлементах...

пример рамки

Comments

[Eugene Chefranov]

Картинка ж получается находится в центральном контейнере, а как задать правильно ширину псевдожлементам чтобы эта рамка уходила за экран влево?

[Александр Севиринов]

ну так задай ширину псевдоэлементу больше чем картинка и сделай выравнивание по правой стороне (right: 0).
Тогда рамка уйдет влево.

[Александр Севиринов]

Jack Brown, https://jsfiddle.net/asevirinov/aq9Laaew/18100/