Как правильно сверстать подобное?

Question

[olya_097]

Answer 1

[Андрей Федоров]

https://codepen.io/aliencash/pen/yLNapBB?editors=1100

Comments

[olya_097]

Андрей Федоров, а зачем пустой img?

<div class="pic">
      <img src="">
   </div>

и почему в .parentbackground-size: 90% auto;
90%
a не 100%?

объясните
пожалуйста

[olya_097]

Андрей Федоров, a нормально , если я дам

.wrapper {
   flex: 1.5;
}

а тут оставлю как было

.pic {
   flex: 1;
}

или 1.5 обычно не задают?

[Андрей Федоров]

olya_097, пустой img случайно в коде оказался. он не нужен. 90%, a не 100% потому что иначе кусок бэкграунда будет вылезать в углу слева внизу. flex можете задать, дробные значения вполне можно. Подробнее погуглите flex-grow.

Чтобы было несколько "в ряд", нужно добавить .parent {overflow: hidden;}

[olya_097]

Андрей Федоров, спасибо

так если я просто уберу

<div class="pic">
      <img src="">
   </div>

то результат не такой будет

[Андрей Федоров]

olya_097, <div class="pic"> убирать нельзя. Можно убрать <img src="">

Answer 2

[html-css]

https://css-tricks.com/creating-non-rectangular-he...