Right angle with CSS/Javascript?

Question

I have a design that I'm currently slicing that features a lot of right angles (Example: http://grab.by/1jli ). I was wondering if a CSS or Javascript (jQuery) solution exists to pull this off? Otherwise I'm going to have a ton of sprites with these crappy things in them.

Just a heads up, I've already tried "Corners", the jQ plugin, and it doesn't seem to be functioning the way I need it to.

EDIT: After doing a bit more digging, turns out jQuery Corners is right for me!

http://malsup.com/jquery/corner/

$("#corner").corner("bevel bl 200px");

Answer 1

check these solutions for CSS triangles:

• http://robertdot.org/2009/03/25/triangles-in-css/
• http://www.pagecolumn.com/webparts/css%5Ftriangles.htm

Answer 2

After doing a bit more digging, turns out jQuery Corners is right for me!

http://malsup.com/jquery/corner/

$("#corner").corner("bevel bl 200px");

Thanks guys!

Answer 3

Why can't you use just one version of that bottom triangle image (a transparent .png, so you don't have to worry about the background)? It could just sit in a div by itself at the bottom of your quote boxes.