Помогите допилить :hover

[innowed]

Здравствуйте! Хотел красиво оформить кнопку, https://jsfiddle.net/uasya/a1kpw4t5/1/ (тут немного её развело, и градиенты я только для теста поставил), но совершенно не получается изменять треугольную часть при наведении указателя на прямоугольник. Я вроде бы видел, что так можно делать, неужели нет?

[ruslan_mart]

https://jsfiddle.net/a1kpw4t5/5/


P.S.: треугольник лучше через ::after прикрутить.

[innowed]

https://jsfiddle.net/a1kpw4t5/5/


P.S.: треугольник лучше через ::after прикрутить.

https://jsfiddle.net/uasya/a1kpw4t5/7/

не подскажите, как этот треуогльник засунуть под прямоугольник? Разные z-index не спасли меня почему-то

[join]

https://jsfiddle.net/uasya/a1kpw4t5/7/

не подскажите, как этот треуогльник засунуть под прямоугольник? Разные z-index не спасли меня почему-то

"треугольник" и так за прямоугольником находится.
https://jsfiddle.net/a1kpw4t5/8/
Какой у вас браузер?