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

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

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

при реализации подобного бреда-кода столкнулся с вопросом: обрыв рамок на подходе к рисунку.
может у вас будут идеи, как эту дизайнерскую вещь перевести в код... (сайт адаптивный, поэтому не хочу лепить фиксированную рамку в качестве фона.... хотя если вы скажите, что это норма, ткнув меня в код этой вещи, то так и сделаю)
  • Вопрос задан
  • 942 просмотра
Решения вопроса 2
0neS
@0neS
codepen.io/podorozhny/pen/xVRXRp

Картинки лучше вынести в спрайт.
Ответ написан
@chirskiy_mixail
Очень давно занимаюсь версткой, имею огромный опыт
Как вариант можно так css.yoksel.ru/border-image
Ну работает в ие начиная с 11, для старых версий нужно полифилы уже использовать
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@sanabek
---
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
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы