How to create a slanted end to a bar-widget


I’m looking to create a slanted end to a progress bar. Attached is a picture of what I’m trying to achieve.
By default the bar in the image I attached gets cut off in a straight line, which obviously doesn’t give me the effect I’d want.

I haven’t yet found a way to do this elegantly, there doesn’t seem to be a slanted property in “styles”. Perhaps it can be done with adding a mask, but I would love some pointers on where to start.

What LVGL version are you using?


What do you want to achieve?

A slanted end to the bar widget.

What have you tried so far?

Sliding a pre-slanted black image over the end of another image. However to do this right we had to use images with an alpha-channel, which significantly increased the binary size. We’d prefer a solution that doesn’t require this.

Screenshot and/or video

We’re really kind of stuck here, the documentation doesn’t really show how this could be done elegantly and we’ve so far failed to find any examples.

Any input would be greatly appreciated!