Как срезать такие углы?

а можно пример? вообще 0 в svg

someserj, svg маски.гуглите

Иван, поддержка браузерами никакая, какие еще способы могут быть?

по секрету - вот сайт с различными способами
тестите в браузерах
какой то способ держат и хром и мозила и наверное даже ишак но я не помню уже какой
https://lab.iamvdo.me/css-svg-masks/

зы: в самом низу страницы расписано какие способы где работают
есть норм способ собственно как я и сказал

но мне нужно срезать углы, а не залить их градиентом

при чем тут градиент?

Alex, background: linear-gradient(to top, #5ec7c0, #b93950);
твой код

удали его, что поменяется?

Alex, спасибо, подходит для верхнего блока. а для нижнего как быть? учитывая, что у него еще box-shadow есть

Между блоками тени не вижу, как её сделать нужно подумать, а по бокам проблем нет
обновил
https://codepen.io/Gopard/pen/oprWOo

Alex, спасибо, но если вставить эту треугольники внутрь блока, то не получается задать им ширину 50%. как это сделать?

someserj, так? https://codepen.io/Gopard/pen/oprWOo

Alex, не совсем, не должно быть привязки к viewport, нужна привязка к родительскому div

someserj, бордеры в % не умеют. Так что если нет возможности рассчитать их размер из размера родителя, то SVG.
Подозреваю что родитель имеет что то типа 70% а форма 50% от него. Т.е 35vw

Alex, по этому поводу создал вопрос Как сделать адаптивные SVG треугольники?