Как это сверстать?

Question

[ivan226]

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

spoiler

Answer 1

[profesor08]

Задаешь секциям фон, потом выставляешь для первой псевдоэлемент в самый низ, для второй в самый верх, задаешь им какой-то фон чтоб отличать, а далее работаешь с clip-path. Все.

https://codepen.io/Profesor08/pen/OwvbwY?editors=0100

Картинки идут с тенью одной картинкой, png/svg. Единственное придется поиграться с margin и z-index, чтоб настроить правильное позиционирование.

Comments

[ivan226]

Спасибо огромное)

Answer 2

[Маленький Вася]

Если не морочится ты можешь тупо background поставить зеленый фон, а потом уже верстать блоки с надписями и оформлять под дизайн, или же это можно сделать через псевдоэлементы :after :before, с теними тоже самое

Answer 3

[Stalker_RED]

Есть и туториалы, и генераторы и библиотеки для этого.
https://www.google.com/search?q=materialize+shadow+css