[Помогите] Как правильно делать фигуры такого плана

В принципе вопрос в теме. Вот линк на образец: http://joxi.ru/v29lZjjIZGl5nm
Или это не фигурами делается? Это такой блок в шапке сайта с содержимым. И он надо чтобы адаптивен был.

--- Добавлено, 18 окт 2018 ---

Из-за градиента и из-за того чтобы тянулся наверное надо именно дивку такой формы - но как?

 

Принцип я понял. Дивка с градиентом не проблема. А подскажите как правильно бордерами срезать? Как задается?
Хотя бы на любом блоке.

 

вот почему ниче не получалось, я пытался снизу делать.... спасибо ... попробую

 

Я возможно что-то не понимаю, но чтобы сохранить градиент на всей фигуре или вернее сказать блоке(дивке), мне нужно сделать фигуру подобного плана: http://joxi.ru/EA4vM77FoD5JNm - и потом надвинуть ее на этот блок чтобы сделать срезы. Просто бордерами у меня какая-то хрень получается :(((
Неужели нет такой возможности в css чтобы просто срезать дивку и бэкграунд?

 

это да, тогда наверное вообще жесть была... так а как вы хотите сказать использовать after, т.е. после основного блока сделать срезы и потом поднять их наверх?
только разве в after можно делать что-то подобное?

 

Решил вопрос совсем иначе и гораздо проще. Есть такая штука: clip-path: polygon - с ней все решается гораздо проще.
И вот накопал в помощь обалденный генератор, которые в разы все упрощает: http://bennettfeely.com/clippy/

 

7

- да с этим я уже столкнулся. С сафари тоже проблемы, на дектопе работает а на мобиле нет, вот и пришлось на разрешении меньше 767 использовать старый дедовский способ))) т.е. бэкграунд в виде картинки)))

- а это как правильно делается такая запись?