Как сверстать следующий фрагмент

Question

Хочу сверстать этот фрагмент, но запутываюсь, так как в макете он для меня-новичка представлен максимально непонятно.

https://ibb.co/zbK3gSh или иначе color: #f7f7f7;

https://ibb.co/sFPzSL3 или иначе color:#ffc000;

Думаю, мне бы хватило одного примера, чтобы сообразить насчет остальных по аналогии. Я бы очень хотел, чтобы был div, у него был background двойной из серого и желтого, а в этот div я положил картинки обе и с помощью z-index одну из них поставил за задний фон.

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

Answer 1

Вот моя попытка на SVG

support:edge chrome firefox ...mobile

<svg id="svg" viewBox="0 0 500 550" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <style>
	
      .fo{
        font-size: 20px;
      }
    </style>
	
    <clipPath id="cp">
           <path d="M0,350 500,260 500,550 0,550z" />
    </clipPath>
	
  </defs>

  <rect width="100%" height="100%" fill="#ccc"/>

  <foreignObject x="30" y="20" width="460" height="160" class="fo">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
      porta vel dui convallis, rutrum imperdiet eros. Aliquam
      erat volutpat.
  </foreignObject> 

  <image xlink:href="https://findesk.ru/upload/iblock/67f/67f9b1a938009c1fbb050f6b7f32c4d4.png" 
         width="500px" height="300px"
         x="0" y="250"
         clip-path="url(#cp)"
         preserveAspectRatio="none"/>

  <line x1="0" x2="500" y1="350" y2="260" stroke="yellow" stroke-width="5" />
  <image xlink:href="https://i.ibb.co/mv4ZshJ/4.png"  width="100%" height="120%" x="0" y="40"/>
  </svg>

Answer 2

Не стоит делать вёрстку чисто по макету, разбирая на куски каждое изображение. Некоторые из них делают только для визуального восприятия. Криво подрезанный фон оставляют как раз в таких ситуациях. Лучший вариант - это сделать единое изображение и вставить его как фон. Во всех остальных случаях вы будете испытывать трудности с отображением и расположением элементов.

* {
  margin: 0;
  padding: 0;
}

.block {
  width: 300px;
  margin: 0 auto;
  padding: 15px 15px 250px 15px;
  background: #f7f7f7 url(https://i.ibb.co/Fgn6sF0/test.png) no-repeat center bottom / contain;
}

<div class="block">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum imperdiet eros. Aliquam erat volutpat.
</div>

Есть ещё вариант

* {
  margin: 0;
  padding: 0;
}

.block {
  width: 300px;
  margin: 0 auto;
  background: #f7f7f7;
}

.text {
  padding: 15px;
}

img {
  width: 100%;
}

<div class="block">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum imperdiet eros. Aliquam erat volutpat.</div>
  <img src="https://i.ibb.co/Fgn6sF0/test.png" alt="" />
</div>

Ну, а если уж играться так, как вы хотели в вопросе:

* {
  margin: 0;
  padding: 0;
}

.block {
  position: relative;
  width: 300px;
  margin: 0 auto;
  background: linear-gradient(162deg, #f7f7f7 0%, #f7f7f7 49%, #ffc000 49%, #ffc000 100%);
}

.text {
  padding: 15px;
}

img {
  width: 100%
}

.i2 {
  left: 0;
  bottom: 0;
  position: absolute;
}

<div class="block">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum imperdiet eros. Aliquam erat volutpat.
  </div>
  <img class="i1" src="https://i.ibb.co/25r2cJW/3.png">
  <img class="i2" src="https://i.ibb.co/zX6wdm2/4.png">
</div>

Но, это так себе решение. Куча слоёв, куча файлов на запрос, проблемы с адаптивностью и т.д..

БЛОГ НА HUSL

Как сверстать следующий фрагмент

Ответы (2 шт):