Как добавить фоновый квадрат позади изображения?

Question

Я пытаюсь воссоздать это:

Но я не смог этого сделать. Я попытался с добавлением: раньше на IMG, но это не работает. Как бы вы go о создании этого. Он должен реагировать так, чтобы фон не становился больше, чем изображение.

SEO не важен, поэтому background-image или что-то не так со мной тоже.

ПИСЬМЕННО В S CSS - ИЗМЕНИТЬ HTML В ОК

ОБНОВЛЕННЫЙ КОД ДЛЯ ОТВЕТА РОБА

Это код, который у меня есть до сих пор

.imgbox {
        padding: 5%;
        position: relative;
        height: auto;

        .backdrop {
            position: relative;
            min-width: 100px;
            min-height: 100px;

            div {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                max-width: 100%;
                max-height: 100%;
                background: rgb(208, 0, 0);
                background: linear-gradient(
                    90deg,
                    rgba(208, 0, 0, 1) 0%,
                    rgba(149, 0, 0, 1) 100%
                );

            }
                transform: translateX(-5px) translateY(5px);
        }

        .img {
            width: 100%;
            height: auto;
            transform: translateX(5px) translateY(-5px);
        }
    }

        <div className="imgbox">
            <div className="backdrop">
                <div></div>
            </div>
            <img
                className="img"
                src={'https://source.unsplash.com/400x250'}
                alt="test"
            >
        </div>

Answer 1

Это просто с тенью от поля.

Заполнители в родительском элементе предназначены для предотвращения обрезки тени.

.imgbox {
  padding: 0 0 30px 30px;
}

.imgbox .img {
  display: inline-block;
  box-shadow: -30px 30px 0 rgb(208, 0, 0);
}

<div class="imgbox">
      <img
          class="img"
          src='https://source.unsplash.com/400x250'
          alt="test"
      />
</div>

Answer 2

Очень просто получить градиент с помощью псевдоэлемента :

.image-container::after {
  content:'';
  position: absolute;
  z-index:-1;
  bottom:-24px;
  left:-24px;
  width:100%;
  height:100%;
  background: linear-gradient(red, firebrick); 
}

Вы можете изменить градиент и смещение, используя background, left и bottom соответственно , Я не уверен, есть ли второй градиент, в правом верхнем углу? Если это так, вы соедините это с ::before, чтобы получить второй фон, и поэкспериментируете с z-index, чтобы получить правильный порядок.

Просто запомните - чтобы сработал псевдоэлемент с абсолютным позиционированием, вы Вам нужно будет установить position:relative в родительском контейнере и content:'';

Codepen здесь .