css3 corner slants not rounded

Discussion in 'Web Design and Development' started by AFPoster, Dec 31, 2012.

  1. macrumors 65816

    Joined:
    Jul 14, 2008
    Location:
    Charlotte, NC
    #1
    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?
     

    Attached Files:

  2. SrWebDeveloper, Dec 31, 2012
    Last edited: Dec 31, 2012

    macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    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
     
  3. thread starter macrumors 65816

    Joined:
    Jul 14, 2008
    Location:
    Charlotte, NC
    #3
    thanks!
     

Share This Page