Streaming live at 10am (PST)

Triangle element with Webflow


#1

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 :slightly_smiling:
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?


#2

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. http://www.fileformat.info/info/unicode/block/geometric_shapes/list.htm


#3

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:


#4

Great :slightly_smiling: 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!


#5

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