Hello!
I need help with creating a certain triangle/diagonal shape to my website. https://monday.com/ this is more or less exactly what I’m looking for. A diagonal shape that seperates the website.
How would I go about creating this shape or background?
I really appreciate help!
You can achieve this to a limited extent by using the Rotation Angle feature when you draw a Shape on the page.
However, Bubble doesn’t handle creating objects like this very well because the “overflow” isn’t hidden. (ie. you’ve only tilted a rectangle. So it’s not quite a triangle. You could do some fancy hiding in groups, but that’s unnecessary effort and isn’t well suited for responsiveness).
I recommend drawing the object in a tool like Pixlr, saving it as a transparent PNG and then dropping the image on the page.
I use Inkscape, an advanced drawing tool which is free. Inkscape can save your drawings as SVGs, which Pixlr can’t. How bubble handles PNGs isn’t the best, that is why you should upload your images as SVGs.
Nice recommendation. Hadn’t heard of Inkscape before.
Thank you for that @jaos.pcl and @dan1!
The problem is that the image needs to be responsive to the size of the website. The rest of the content in the website will adapt to the size of the screen, therefore the background image can’t stay the same. If I make it in Inkscape I will have to set a certain amount f pixels as with and hight.
is there any solution for making that background shape responsive?
SVGs are scaleable, that is, they can be responsive. See this page for an example:
As well, instead of drawing an image element on the page, draw a group and make the background style an image (where the image is the PNG/SVG you created). That way, you can use the group as a container and have element interact within that.
It may require a bit of tinkering to get the responsiveness right. But such is life when designing for responsiveness.
Yes that seems like a good idea, thanks!
This topic was automatically closed after 70 days. New replies are no longer allowed.
