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

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

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

Заранее спасибо за советы.
  • Вопрос задан
  • 233 просмотра
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 1
petermzg
@petermzg
Самый лучший программист
Так вы добавляйте к картинке псевдоэлементы (50% ширины) и с transform поверните их.
Как вы и указали, сделайте для картинки overflow: hidden
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы