Any way to create a triangle with a border?

Need help
1

I think the answer is no, but thought I’d ask: Is there any way to create a triangle with a border for use within Bubble? Circles can be done with radius function. I can hack a triangle without a border using the sort/play icons. But I can’t get one with a border. I’ll probably try importing an image but that’s unlikely to provide the seamless edge that I need.

(And yes, I know, it’s sort of a frivolous question and certainly something I can live without, but I’m trying to make my app look as good as possible visually.)

Thanks in advance for any suggestions.

-Ed

1 Like
2

It should be doable with multiple overlapping shapes with a one-sided border and rotate them respective of each other. Keep the shapes in a single group to make it easier to move the triangle around.

1 Like
3

Thanks! Somehow I completely missed that rotation angle input. I had seen the “make the icon rotate” toggle and must have just glossed over the rotation angle input. (Fifty times.) I haven’t tried it yet, but yes your suggestion seems perfect. Thanks, Scott!

4

Was able to do exactly what I wanted. Thanks again, Scott!

1 Like
5

I’m glad to have helped!

1 Like
6

another option is to play with HTML and CSS and put that in an HTML element. See these links

and

A little bit more technical but you can do a lot. The thing you won’t be able to do though is to use the element to trigger a workflow, etc.

2 Likes
7

Great little resources, @emmanuel. Thanks for sharing. In my case, I just wanted to have a little triangle extend from my menu affordance down into my dropdown content itself, as shown in the attachment. So the rotated square + mask + “negative Y value within group” did the trick.

2 Likes
8

@emmanuel can you help me better understand how to edit the CSS of an element? I was also trying to make a triangle and wanted to use your recommendation but couldn’t figure it out. I copy and pasted it into an HTML box and it just came out as text. I also tried creating a bubble shape and then referencing the html text but couldn’t get it to work. Any help would be appreciated thanks!

9

You can’t edit the CSS directly in Bubble, what what i’m suggesting here is to put both the HTML and the CSS in an html element, so that you have entire control.

10

Did you get an answer to your question? I’m having the same problem.

11

@bakercito you can take a look here - I have dropped the CSS code into a HTML element…

The CSS code needs to nest within <style> tags and you need to call the Triangle through a <div> HTML tag which has the same ID as the CSS object. This just gets you started and you will want to check resources like this color chart if you are going to head this direction. It’s the most efficient option if you can crack it!

1 Like