Как реализовать кривую границу блока/секции на сайте?

Question

[Алексей]

Добрый день.
Необходимо создать такой фон секции: посередине имеется скос по диагонали + тень.

Это необходимо сделать адаптивно.
Я пробовал псевдоэлементами + геометрические фигуры css - но таким способом не адаптировать.
Помогите

Answer 1

[profesor08]

Где-то раньше был точно такой-же вопрос, с точно таким-же фоном.

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

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

Comments

[Алексей]

Попробовал, понравилось решение, как раз первый раз познакомился с clip-path)
Единственное, все пишут, что старыми браузерами это свойство не поддерживается,
на caniuse 88%, но пока верстаю тестовые шаблоны, то не запариваюсь)

Спасибо огромное за помощь!

Answer 2

[Максим]

Лень мне градиентами заморачиваться но вот так можно попробовать : https://codepen.io/topicstarter/pen/eLjaNm?editors=1100

Comments

[Алексей]

Попробовал по этому примеру сделать себе, не разобрался как тень добавить, но вариант без тени сделал.

А по поводу градиентов,
ты имеешь ввиду, что можно всего-лишь обойтись градиентом к основному блоку и все?

[Максим]

Алексей, да ...я там блоками сделал ...но вообще можно сделать просто на градиентах ...просто на самом деле лень ...

[Алексей]

Максим Ленский, оо интересно, я попробую

[Алексей]

Максим Ленский,

вот что получается с помощью градиента, впринципе то что надо, только пока не разобрался как тень по середине сделать не равномерной!)
Спасибо за участие, такой вариант тоже пригодится в будущем, возможно в других случаях

Answer 3

[geektimer]

Как вариант, можно добавить svg элемент.

Comments

[Алексей]

Я тоже рассматривал этот вариант, сам еще svg не изучал, но только везде пишут что он не растягивается на всю ширину.