css3 corner slants not rounded

[AFPoster]

So I know using border-radius we can round out the corners of a <div>. Is there a want to make a slanted corner like in the screen shot?

[SrWebDeveloper]

Personally I'd use a tiny .png image background image positioned bottom right of a div container and offset to the left a bit. The div would also be set with a similar border color and size. Using an image assures cross browser compatibility at the sacrifice of a little bandwidth but it will be cached and file size would be very small.

Beyond that, there are ways to do it purely with CSS although it gets a little complex and might not be fully MSIE compatible. Please visit this site which allows you to fiddle with both the HTML and CSS to customize slanted corners:

http://jsfiddle.net/NGLN/k86Mr/2/

(You'll notice if you comment out .box .head selector with the image you can still see the slanted corners which is what you asked about, the example creates more than just slanted corners but a nice looking sidebar dialog or content block like you'd typically find on a site) FYI

-jim

[AFPoster]

Originally Posted by SrWebDeveloper

Personally I'd use a tiny .png image background image positioned bottom right of a div container and offset to the left a bit. The div would also be set with a similar border color and size. Using an image assures cross browser compatibility at the sacrifice of a little bandwidth but it will be cached and file size would be very small.

Beyond that, there are ways to do it purely with CSS although it gets a little complex and might not be fully MSIE compatible. Please visit this site which allows you to fiddle with both the HTML and CSS to customize slanted corners:

http://jsfiddle.net/NGLN/k86Mr/2/

(You'll notice if you comment out .box .head selector with the image you can still see the slanted corners which is what you asked about, the example creates more than just slanted corners but a nice looking sidebar dialog or content block like you'd typically find on a site) FYI

-jim

thanks!