How to set up a rhomboid health bar?

I am currently upgrading the health bar of my game from a simple rectangular slider to a more complex rhomboid health bar. The problem is, it doesn’t show well.
Here are some pictures of what I mean:

The health bar in the editor view, top is my old one.

This is what is looks like when health is full; I want it to look like this

However, the lower my health gets, the more my image squashes, making it look worse. Also, when I have no health, the first image is what I see (comes out of the background bar).
I wouldn’t mind if I had to make the image come from the centre then to the edges if I had to, but I have no idea how to do that.

Can’t you use a mesh with a shader? Just add an option of percentage filled and you should be ok to go.

I have found the answer, after messing around with the inspector I found changing the fill bar image to Filled > Horizontal, it does pretty much exactly I wanted to do.