Как сверстать такой уголок-разделитель максимально кроссбраузерно?

Question

[Константин Величко]

Помогите, сверстать такую штуку (название не могу подобрать).


Верхняя часть картинка поверх текст и кнопка.
Нижняя часть слайдер или картинка.
Верстка адаптивная, важно что бы тянулось.

Придумал несколько способов

1. CSS clip-path работает как надо но только в хроме
   
2. SVG cilp-path не тянется как в п.1
   
3. Canvas, не знаю как сделать все что получилось по ссылке
   

Answer 1

[Kuat Mustafin]

codepen.io/anon/pen/ZQvXgB

Comments

[Константин Величко]

Близко но, нужно без .block2:after. Так как в в нижней части должна быть картинка. Верхний блок должен наезжать на нижний перекрывая его частично.

[Илья Рябыкин]

Константин Величко: anti-margin?

Answer 2

[Владимир Ио]

Учитывая, что примыкает элемент к картинке, может имеет смысл их объединить?

Comments

[Константин Величко]

Поверх верхней картинки идет полупрозрачный градиент выше текст. Как писал выше верстка адаптивная. При уменьшении ширины текст будет растягивать по высоте верхний блок