Progress bar styling

I need to add an angle to the progress on a ion-progress-bar but cannot seem to target the .progress class to add clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); to it. Closest I can get is applying the angle to the whole bar, not the highlighted “progress”

Hi,

as far as I can tell, the parts of the bar are mostly/all shadow-parts which you cannot change, unless the property is listed as shadow part/customer property. If you need more customised styling, you may need to move away from ion-progress-bar

Thank you. You gave me something else to look at.
This works:

 ion-progress-bar::part(progress) {
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}
1 Like

Cool! And now i bit better understand what it can do for us! (Shadow parts)