Как сверстать ползунок громкости HTML5 плейера с треугольной формой?

Question

[parnasmi]

Верстаю макет. В макете есть аудио плейер с кастомным дизайном. Стилизую с помощью плагина mediaelements.js. Имею трудности со стилизацией элемента громкости. Пытался использовать хаки в виде градиенты, клип маски. Но не удалось достичь нужного результата. Вот ссылка на сайт где плейер на данный момент выглядеть. Вот сам дизайн плейера:


Помогите пожалуйста, советами, наводками! Заранее спасибо!

Comments

[Alexander Belov]

jsfiddle.net/onigetoc/j010vxc0

[parnasmi]

Спасибо большое, попробую сейчас интегрировать.

[parnasmi]

Так как я стилизую через mediaelemens.js(www.mediaelementjs.com/) Не получается внедрить ваш код. Там в скрипте контрол на громкостью привязан кажеться к background. Спасибо все равно! Да и тега audio тоже нет в разметке. Плагин ее убирает и ставить свою разметку.