Как кроссбраузерно сделать такой же анимированный загнутый уголок?

Question

[Саша]

Здравствуйте, подскажите пожалуйста как сделать так же но кроссбраузерно?
В данный момент адекватно отображается только в Хроме и Опере.
Спасибо!

Comments

[Саша]

фиддл с префиксами

[zooks]

Хром и Опера - один браузер с разными обертками.

[Саша]

zooks: это понятно, и?)

[zooks]

Саша: скачайте другой уголок, у этого реализация хромает

Answer 1

[Виталий Инчин ☢]

Ну, к примеру, писать везде не только
-webkit-
Но и префиксы для остальных браузеров (а так же дефолтный вариант)....

-moz- /*Мозилла*/
-o- /*Опера*/
-ms- /*IE*/
-webkit- /*Chrome*/
/*И так далее*/

Comments

[Саша]

Дело не в префиксах, а конкретно в этом свойстве
-webkit-mask:

[Виталий Инчин ☢]

Саша: ну так пропишите mask (для Firefox) и -webkit-mask (для остального).
caniuse.com/#search=mask
Криво будет работать только в Opera Mini, Edge и IE, но тут уж ничего не поделаешь.

[Саша]

Виталий Инчин: не работает

[Виталий Инчин ☢]

Саша: Потому-что Firefox не хочет воспринимать грандиент в качестве маски :\. А так свойство вполне таки работает. (Уберите -moz-mask, такого свойства не существует).

[Саша]

Виталий Инчин: оно все равно не срабатывает)

[Виталий Инчин ☢]

Саша: попробуйте заменить грандиент изображением или сплошным цветом.

[Виталий Инчин ☢]

Саша: наверное Частичная поддержка Firefoxом выражается именно в невозможности юзать грандиент.