Как делать такой Background?

Question

[sanke46]

Как верстать такой бг ??

Comments

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

Там много элементов, что конкретно вызывает у Вас сложность?

[Александр]

а что конкретно то непонятно?

[Антон]

Максим Тимофеев, Видимо, ТС не может понять, как слои выше прозрачными сделать, чтобы планктон просматривался

[darksladen]

Антон, а как сверстать этот красный блок с кривым углом?

[Александр]

darksladen, красный блок прямоугольный, а вот белый уже наложен поверх него, и у белого задан border-radius и skewX

[darksladen]

Александр, гыгы.. вы что слева не заметили изгиб? Прямоугольный, ага ;)

[Антон]

darksladen через before after

[darksladen]

Антон, не получится там так сделать! При ресайзе у вас хрень будет

[Александр]

darksladen,
ага, он таки прямоугольный:

<div class="wrapper">
<div class="red"></div>
<div class="white"></div>
</div>

.wrapper{
  width: 600px;
  overflow: hidden;
}
.red{
  width: 600px;
  height: 200px;
  background-color: red;
  }
.white{
  width: 700px;
  height: 200px;
  background-color: #fff;
  border-radius:20px;
  transform:skewX(-20deg);
margin-top:-100px;
  }

песочница
через псевдоэлементы кстати тоже можно сделать так что бы при ресайзе ничего не съезжало

[darksladen]

Александр, спасибо, интересное решение ;)

[Александр]

darksladen, да обычное решение, главное не забыть внутренние элементы в обратную сторону повернуть :)

Answer 1

[smithana]

Картинку с помощью background-mage назначить для body.
А первому белому и второму красному блоку назначить цвет с полупрозрачностью с помощью rgba.

Comments

[sanke46]

Можно ли использовать svg и юзать его ?

[smithana]

sanke46, а зачем? для фигурных скобок и левого "подтёка" красного блока?

[sanke46]

smithana, просто при супер брльших разрешения весь bg просто становится ни каким

Answer 2

[Oscar Handsome]

Есть несколько вариантов, нужно смотреть как вы хотите разметить.

Тут самый элементарный вариант:
.background{
background-image: url('путь/bg,jpg');
position: relative;
z-index:0;
}
поуправлять размрами и тд.

последующим блокам z-index увеличиваем

Comments

[sanke46]

а можно использовать SVG ?и как его юзать ??