Как адекватно сверстать подобный фон?

Question

[Destell]

Картинка

Как адекватно сверстать подобный фон, чтобы блок с ним был адаптивным? Правые квадраты, как видно, полупрозрачны и под ними видно фон блока, поверх которого лежит этот блок.

Одним из вариантов было использование нескольких бэкграундов, на верхний правый, нижний правый и нижний левый углы, но при задании белого фона, фон ложится и под квадраты. Была так же мысль о псевдоэлементах, но не уверен, что это лучший способ.

Answer 1

[forspamonly2]

border-image

Answer 2

[Andrej Sharapov]

Можно сделать вроде такого:

<div style=position: relative;background-image...>
<div style=position:absolute;left:;top:;></div>
<div style=position:absolute;bottom:;right:;></div>
<div style=position:absolute;right:;top:;></div>
<div style=position:absolute;bottom:;left:;></div>
<div>и т.д.</div>
</div>

Comments

[Ankhena]

Зачем столько лишних оберток, если можно сколько угодно фонов писать к одному элементу?

[Destell]

Ankhena, есть одно "но" - оно неадекватно адаптируется.

[Ankhena]

Destell, Ну и где в задании про то как оно должно адаптироваться и где ваш рабочий пример в котором проблемы при множественном фоне?

[Destell]

Ankhena,

Накидал пример
ссылка

Если делать одной картинкой, то при изменении размеров блока (в высоту, например) та деформируется. Пробовал сделать заполнение между блоками с прозрачностью, но что-то завис.

[Ankhena]

Destell, они сжимаются сохраняя соотношение сторон картинки, если нужно чтобы картинки сжимались пропорционально размерам блока, то у bg-size 2 размера, по горизонтали и вертикали.
Вот иллюстрация: https://jsfiddle.net/fatcz3bk/

Answer 3

[Максим Тимофеев]

Режем на части картинку, устанавливаем блоку несколько background. Но по моему адекватнее просто 1 картинку.

Comments

[Destell]

Есть одно "но" - оно неадекватно адаптируется.

[Максим Тимофеев]

Destell, почему? Покажите пример