Как сделать такую рамку на css?

Question

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

Доброе время суток! Имеется макет в psd и его необходимо заверстать. Все хорошо и я справляюсь, одно но: в макете очень часто используются смещенные рамки, такого типа:

Я ума не приложу как их делать и чем....
Сразу оговорюсь, что макет адаптивный, то есть просто взять рамку из шаблона и воткнуть в рабочую среду не получится.
Пробовал делать box-shadow - несколько рамок одновременно - получилось, но рамки режутся и получается не так, как в макете. Как быть? Может кто профессионально умеет делать такие вещи...

Answer 1

[Ivan Bogachev]

codepen

Answer 2

[Сергей Горячев]

https://jsfiddle.net/webirus/4mm78ddv/

Answer 3

[Андрей Федоров]

codepen.io/aliencash/pen/egbzEv

Answer 4

[Руслан Галиев]

codepen.io/ruslanredo/pen/JEwKOL

Answer 5

[DiaTM]

Не знаю прокатит Бро нет. Щас только придумал. Можешь сделать для блока див допустим 25%, сделать рамку. div-у position:relative; а картинке position:absolute; либо смещать с помощью margin:-10px; div img{max-width:100%;

Answer 6

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

ну я догадывался что абсолютными псевдоклассами нужно, но что-то конкретно проблему не мог решить
а так - все получилось, большое спасибо ребят