Negative Border Shape

Hey!
Does anybody have an idea whether it is possible to give a group some kind of negative border look as seen in this picture?
grafik

Thanks for any help in advance!

Not with native Bubble features. You could use custom CSS to apply to the element to get that look.

If I had to create this, I’ve thought of experimenting with transparent PNGs to comprise the shape of that top right ‘gap’ and then build the tile into an Aline To Parent group, the shape set to top right corner placement. Might not be the best approach depending on browser dark/light modes, but it’s where I’d start.

1 Like

Nice idea.

I believe you could construct the .png in canva.

If you can survive without the red-circled part, it is doable with 3 groups (with the assumption: the black background in the icons in your example is really color black, and not another transparency):
image

chrome_bPaxDK8gta

The outer group is align to parent. And there are two groups inside with various border-radius for different edges:

If your background doesn’t change often, you can also create the exact shape:
chrome_vpSfN3Xp1a

If you want to check the editor, here it is: Tests for Forum 14 | Bubble Editor

3 Likes

Thanks for the tip! You’re amazing.

I was able to come close to replicating the example the OP gave without code or a plugin in a picture group and then added an icon that changes color when it’s hovered.

Screenshot 2024-06-22 11.10.47 AM

2 Likes