How to truncate sprite without changing the scale of the sprite?

For now, I use transform.localScale to design a HP bar that will keep decreasing HP when player get hit but because of localScale issue I get the undesired result as image below. I dun want tat portion also changing.

You will ask why dun just put a complete rectangle to do that but the UI layout is semi-transparent as image below. So, I need a way to truncate the sprite without modifying the scale of sprite.

My desired output is decrease the HP bar without changing the frame layout of the HP UI as the sample image below.

Here is my code for modifying scale of the sprite:

 using UnityEngine;
 using System.Collections;
 
 public class HPBar : MonoBehaviour 
 {
     public float hp = 1800;
     public float damage = 510;
 
     float totalhp;
     float healthPercent = 100;
     SpriteRenderer hpBar;
     Vector3 hpScale;
 
     void Start()
     {
         hpBar = GetComponent<SpriteRenderer>();
         hpScale = hpBar.transform.localScale;
         totalhp = hp;
     }
 
     void Update()
     {
         // Mouse left click 
         if (Input.GetMouseButtonDown(0))
         {
             hp -= damage;
             if (hp > 0)
                 healthPercent = hp / totalhp;
             else
                 healthPercent = 0;
             hpBar.transform.localScale = new Vector3(hpScale.x * healthPercent, 1, 1);
         }
     }
 }