Streaming live at 10am (PST)

CSS Triangle inside of Webflow

TIL (Today I learned) that you can type in the word “transparent” into the border color in Webflow.

http://spaceshipspaceship.webflow.com/
https://webflow.com/design/spaceshipspaceship?preview=479e1b771d56b153acd35a42a31dc681

12 Likes

Pretty cool indeed…!

Super useful. I’ve been looking at shaping divs also and this is a great approach! Thanks for the share.

Hey @PixelGeek, you can also use the ‘Transparent’ swatch as a shortcut without having to type out the entire word :smiley:

oh. duh… I’m dumb =P

2 Likes

This just saved me with the new tabs. I didn’t like the idea of using a PNG like in the tutorial for the tabs. This is a much simpler way of implementing an arrow. Thanks PixelGeek!

1 Like

Amazing trick!!! thank you!!

Thanks for taking the time to share - it helped me out also!

If you want to use triangle in CSS, you need to realize that there is no property for this, only trick with borders. Good examples can be found here: different shapes and orientations of triangles using only CSS. Anyway this trick works fine in very old browsers, so it can be considered as cross-browser.

Finding this made my day! :smiley: I’m about to have a hay day with these lol

1 Like