Ribbon on profile picture based on wordpress role

Dear Community,
I am just building up a buddy press intranet, where there are mainly four different roles:
- Users (subscribers)
- Admins (administrators)
- Internal Experts (Contributors)
- External Experts (Contributors)

For the Admins and the Experts, I would like to have a ribbon to their avatar that shows their role, so that users can quickly see who is who: red for admins, gold for experts.

I found the following solution in your community, that I think comes close to what I want:
https://premium.wpmudev.org/forums/topic/buddypress-verified-like-ribbon-on-certain-users-pages

There the request was a bit different as it seems that this user wanted something next to the avatar, I would like to have a CSS ribbon in the top right corner of the avatar:
https://codepen.io/nxworld/pen/oLdoWb

Thank you very much for your help! I hope you can point me into the right direction.
BTW: I am using the theme WOffice which also has a custom css code field in the preferences.