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

Question

[someserj]

у верхнего блока с картинкой и у нижнего

Answer 1

[Денис Васильев]

https://codepen.io/corvus-007/pen/vpqJOB?editors=0110

Answer 2

[Александр Алексеев]

сделать контур в svg и через css mask

Comments

[someserj]

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

[Иван]

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

[someserj]

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

[Александр Алексеев]

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

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

Answer 3

[Alex]

https://codepen.io/Gopard/pen/oprWOo

border-width и border-color в помощь

Comments

[someserj]

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

[Alex]

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

[someserj]

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

[Alex]

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

[someserj]

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

[Alex]

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

[someserj]

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

[Alex]

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

[someserj]

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

[Alex]

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

[someserj]

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