Streaming live at 10am (PST)

CSS Triangle inside of Webflow


#1

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

http://css-tricks.com/snippets/css/css-triangle/


Arrow Shaped Section
Image on top of another image
Inexplicable parallax only in Firefox
#2

Pretty cool indeed....!


#3

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


#4

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


#5

oh. duh... I'm dumb =P


#6

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!


#7

Amazing trick!!! thank you!!


#8

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


#9

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.


#10

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


#11