Двойная рамка с узорами по углам, как сверстать?

Question

[2311mar]

вопрос по верстке данного блока в адаптиве с помощью bootstrap

исходя из моих скромных знаний верстки логика такая:
первый div имеет background-image с 4 картинками и background-position top-left.... и так далее их расположение
второй див рамка толстая
третий див тонкая рамка

при реализации подобного бреда-кода столкнулся с вопросом: обрыв рамок на подходе к рисунку.
может у вас будут идеи, как эту дизайнерскую вещь перевести в код... (сайт адаптивный, поэтому не хочу лепить фиксированную рамку в качестве фона.... хотя если вы скажите, что это норма, ткнув меня в код этой вещи, то так и сделаю)

Answer 1

[Иван]

codepen.io/podorozhny/pen/xVRXRp

Картинки лучше вынести в спрайт.

Comments

[2311mar]

просто невероятно как изящно и красиво вы сделали, я в восхищении!!!

Answer 2

[Михаил Чирский]

Как вариант можно так css.yoksel.ru/border-image
Ну работает в ие начиная с 11, для старых версий нужно полифилы уже использовать

Answer 3

[SSS 010101]

C :before и :after можно такое сделать.
или

<div class="obw">
<div class="verhr"></div>
<div class="verhl"></div>
<p>content</p>
<div class="nizr"></div>
<div class="nizl"></div>
</div>

дальше дело CSS

Comments

[2311mar]

4 дива с абсолютами?

[SSS 010101]

2311mar: нет. например .verhr {float: left}; verhl: {floar: right}; в .obw {border 1ps double
#youcolor}; и так далее если вы поняли.