Chomper Stomping jQuery/JavaScript/CSS 3/HTML 5, Java/PHP/Python/ActionScript, Git, Chrome/Firefox Extensions, Wordpress/Game/iPhone App Development and other random techie tidbits I've collected

Here are some extremely easy basic CSS 3 only triangular-bottomed bookmark split-ribbon things.

This is accomplished through some creative use of the "border" attribute on divs in CSS. It takes a main div (where the body of the ribbon is) and then two smaller divs that create the actual split ribbon effect.

You can change their color, or even assign a background image for some truly ribbon like effects.

You could probably even throw some nice shadows on it and make it look even better, but, this is just a very simple basic version.

You may have to scroll down past the share bar to see the embedded jsfiddle...

I whipped these up today for something I was working on and realized it was worth sharing with the world.

Thanks to CSS-Tricks.com for the basis of this effect (css triangles).