Как сверстать секцию с вырезанной сверху границей на чистом css?

Question

[Алексей Николаев]

Доброго вечера.
Речь идет вот о такой штуке. Возможно сверстать это на чистом css с нормальной поддержкой браузерами? Я пробовал добавить белому блоку снизу псевдоэлементы и поиграть с transform, но тогда они начинают вылезать за пределы блока (снизу могут вылезти или сбоку, а это в реальном макете заметно), а overflow: hidden их, соответственно обрезает и сверху. Попытки сделать что-то с border также не увенчались успехом, т.к. треугольник должен быть адаптивным по всей ширине.

Штука

Обрезать слайдер сверху при помощи, к примеру, масок, плохой вариант ввиду малой поддержки. Обычно я такое верстаю картинкой, но возможно, есть путь лучше?..

Заранее спасибо за советы.

Answer 1

[Kuat Mustafin]

codepen.io/kuatmus/pen/LGLPXP

Comments

[Алексей Николаев]

Viewport Units? Гениально, я о таком не подумал. Спасибо!

[Kuat Mustafin]

Алексей Николаев: рад что помог, да и с поддержкой как бы не плохо caniuse.com/#feat=viewport-units

[Борис Якушев]

Kuat Mustafin: Жаль что нельзя поставить более одного "нравится"

Answer 2

[Петр]

Так вы добавляйте к картинке псевдоэлементы (50% ширины) и с transform поверните их.
Как вы и указали, сделайте для картинки overflow: hidden