Как сверстать фон с треугольным прозрачным элементом с тенью?
По мотивам темы Как кроссбраузерно обрезать backround image средствами css?Вот так можно перекрывать псевдоэлементами.
А вот так можно сделать нужные области «прозрачными» для операций в той же картой.
И, наконец, тени наружу, прямо как Пегий Дудочник.
Напоследок «матрёшка».
Вот и сказке конец, а кто слушал — молодец.
У меня была ситуация когда надо было сделать анимашку с прозрачным фоном и тенью, помню дизайнер долго мучался... И точно помню что SVG не подходила, т.к не давала прозрачность, а что он придумал в результате я не помню((