Advanced Special Meters and Health Bars

Hi, I'm fairly new to c2 (2 weeks) but I'm doing pretty well. I'm making an advanced fighting game. So far I've photoshopped all the hud elements, coded all the movement/jumping/dashing/airdashing/dodging/rolling etc type techniques, and animated my character using placeholder sprites I snagged from guilty gear (hehe). Most of the stuff in the game I haven't had a problem with so far, but I am not sure the best way to handle my current problem.

This is the meter bar when it is full... it has a red trim and full red bars.

How can I, and how should I, go about making this to where I can use sprite layers, blending modes, etc... in order to not have to animate out every frame aka every sliver of meter that fills up?

I basically want it to use the blank meter sprite but then reveal the partial meter sprite until it fills a whole subsection, then hide that subsection of the sprite and use the red meter subsection piece.

I could probably also make the red meter part easier by making each individual piece for the red meter subsection's their own sprite... that's fine, but it still doesn't help me with the filling up of the current subsection of meter with the yellow bar.

I don't want to stretch the width obviously as that would constrain the image, or can I have it keep the image aspect ratio and then clip the image as it resizes it? Any help would be much appreciated. It should go without saying I'm trying for the most concise and straightforward approach that minimizes number of sprites and animated frames.

Obviously if there is 150 SP total in the meter, I could have 150 animation frames and then just have it show the frame in the animation of how many SP you have, but that is a lot of overhead in frames and I'd prefer a more dynamic way of doing things.

Much appreciated, it's almost perfect, but you see how the segments are tilted diagonally? When I resize it's width the clipping is straight up and down, if I was to rotate the sprite, I'm guessing that it will still have a straight up and down line? or will the X axis be relative to the sprite itself and allow me to maintain that diagonal line as it fills the segments?

EDIT:

Would it be possible for my to throw it into a container that way I can rotate the container while counter rotating the sprite/tiled BG?

EDIT2: I made it work by going into photoshop and rotating the original image 18 degrees clockwise, and then using the rotated image in c2 and rotating it -18 degrees so that the X axis is at the same angle as the subsection lines.

Is there a non-destructive way to accomplish this? Rotating rasterized images reduces the quality of the image, and while most of are shapes, I would assume there is another way to accomplish this inside C2 alone.

Containers don't seem to work the way I assumed they would. Rotating the container doesn't rotate the objects contained within them from what I tried, and changing the width of the container doesn't seem to clip and hide the objects contained within it...

Is there a good way to accomplish this without having to physically rotate the sprites in photoshop?