How to make HTML5 player volume slider with triangular shape?

Question

css

I'm making a layout. The layout has an audio player with custom design. Styling with mediaelements.js plugin. Having difficulty styling the volume element. Tried to use hacks in the form of gradients, clip masks. But it was not possible to achieve the desired result. Here is a link to the site where the player currently looks like. Here is the design of the player itself:

Please help, with advice, tips! Thanks in advance!