Как сверстать скошенный блок?

классный вариант, но у меня не цельный синий цвет, а градиент.

background: linear-gradient(180deg, #092E6E 0%, #064B7E 100%);

как быть?

someserj, тогда придется обрезать картинку clip-path bennettfeely.com/clippy

Ankhena, круто, но даже Edge не поддерживает, не говоря уже об IE11

someserj, ну будет в них вертикальная граница, в данном случае это не должно быть критичным.

Если прям принципиален ИЕ, то без лишних блоков не обойтись.
Например, так https://jsfiddle.net/2zL5xt7q/
Сдвиг блока поставила первое что пришло в голову, посчитайте сколько нужно, возможно надо указывать через calc, если высота изменяемая.

Ankhena, спасибо, пробовал сам сделать так, но не знаю как решить проблему с адаптивностью - а именно translateX(-50px) должно быть плавающим значением

someserj, я тоже не знаю как решить вашу проблему с адаптивностью, потому что даже не знаю как себя ведет этот блок при адаптации. Ни макетов ни вашего кода.

Самый простой вариант это абсолютное позиционирование этого блока от центра, а ширину задавать с запасом. Всё равно overflow отрежет лишнее.

Если бы знать на сколько изменяются размеры этого блока, может можно было бы еще что-нибудь придумать.

хороший вариант, но у меня градиент, а не цельный синий цвет. как быть?

someserj, тогда треугольниками не выйдет, но можно так
https://codepen.io/avkvak/pen/ppVvjx