Streaming live at 10am (PST)

Triangle element with Webflow

Is it possible to make such a triangle marker in Webflow? ( I mean this orange triangle “Special Offer” in the corner of the pic). And if “Yes”, then how? Preferable without coding :slight_smile:
I have made a div block, and even rotated, and placed in the corner. But how to hide the extra-parts of the box, so that just one triangle part would be in view?

1 Like

Hi, here is a reverse flash tutorial (:

Basicaly a triangle is half a square rotated at -45°

You could also use any SVG triangle icon.

there are also triangles in the unicode table. Copy and paste them and use them as text.


Thank you very much @vincent! Your tutorial worked for me after I made a wrapper position as absolute. In auto position it didn’t overlay the image. So finally I have got such a structure:

with “marker wrapper” in absolute position, and “special offer marker” in relative position.
And finally:

Great :slight_smile: Yes you may have noticed that absolute position overrides the overflow hidden property of a parent, that’s why I had to rely on relative. Have a good day!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.