ArtDenis
@ArtDenis
Разработчик сайтов и мобильных приложений

Как сверстать фон с треугольным прозрачным элементом с тенью?

Здравствуйте, не знаю как верстать такие блоки, такой треугольник есть почти у каждого блока на сайте, как и у блока с фоном изображением, так и фоном с цветом.
По понятным причинам, png использовать не хочу. Неужели решением является SVG? А получится ли нужная тень? На счет совместимости, даже если SVG не поддерживается каким-либо браузером, там же будет просто ровная линия (иначе говоря, svg будет просто не видно)?
cea0a637d5db4940aa024884c7054fcd.png
  • Вопрос задан
  • 2001 просмотр
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
По мотивам темы Как кроссбраузерно обрезать backround image средствами css?
Вот так можно перекрывать псевдоэлементами.
А вот так можно сделать нужные области «прозрачными» для операций в той же картой.
И, наконец, тени наружу, прямо как Пегий Дудочник.
Напоследок «матрёшка».
Вот и сказке конец, а кто слушал — молодец.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
metr0
@metr0
Треугольник делается через псевдо элементы :after или :before, Вот сервис по генирации таких стрелок)
Ответ написан
DeadCowsDontMoo
@DeadCowsDontMoo
web
У меня была ситуация когда надо было сделать анимашку с прозрачным фоном и тенью, помню дизайнер долго мучался... И точно помню что SVG не подходила, т.к не давала прозрачность, а что он придумал в результате я не помню((
Ответ написан
Ваш ответ на вопрос

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

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