Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
css3 corner slants not rounded
- Thread starter AFPoster
- Start date
- Sort by reaction score
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
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
Last edited: