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

Question

[Денис Артемьев]

Здравствуйте, не знаю как верстать такие блоки, такой треугольник есть почти у каждого блока на сайте, как и у блока с фоном изображением, так и фоном с цветом.
По понятным причинам, png использовать не хочу. Неужели решением является SVG? А получится ли нужная тень? На счет совместимости, даже если SVG не поддерживается каким-либо браузером, там же будет просто ровная линия (иначе говоря, svg будет просто не видно)?

Answer 1

[Евгений Петров]

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

Comments

[Денис Артемьев]

отличное решение) На старых браузерах эти навороты просто исчезают, в IE 9, как показал IEtester, появляется полоска тени, что терпимо. В остальном это лучше чем загружать спрайт - 1500х500. Спасибо

Answer 2

[hax0r :3]

Треугольник делается через псевдо элементы :after или :before, Вот сервис по генирации таких стрелок)

Comments

[Денис Артемьев]

Спасибо. Хорошая идея, но насколько я знаю, тень здесь не получиться сделать :((

[hax0r :3]

Почему же? внутрению тень

[Денис Артемьев]

hax0r :3: не выходит: https://yadi.sk/i/PJhb8pgCgqkKi

[hax0r :3]

Вопервых, вы снимите бордер, там есть такая цифра 4, вы за место ее поставьте 0, а затем скопируйте весь, элемент after, в свой css код.

[Serj-One]

hax0r :3: перестань вводить людей в заблуждение. Тень в этом случае не задать.

[hax0r :3]

Serj-One: Картинками тогда, или как?

[Денис Артемьев]

Serj-One: с этими уголками, если повозиться, тень получиться... habrahabr.ru/post/107259

[Serj-One]

Денис Артемьев: В статье прекрасно описаны минусы, а фраза "Не знаю, будет ли кто-то всерьез использовать этот способ. Даже я им озадачился в основном с целью размять мозги. " отлично оценивает применимость метода.

[bob_cody]

cssdeck.com/labs/d7et5zph
Вот вам вариант как можно поступить с нижним уголком, чтобы сохранялась и тень.

Answer 3

[Дмитрий Шинкарь]

У меня была ситуация когда надо было сделать анимашку с прозрачным фоном и тенью, помню дизайнер долго мучался... И точно помню что SVG не подходила, т.к не давала прозрачность, а что он придумал в результате я не помню((

Comments

[Евгений Петров]

SVG не давала прозрачность?.. Это как?)

[Дмитрий Шинкарь]

Евгений Петров: Его слова, не мои...) моя не понимать ничего в создании анимашек :)