making slants

Discussion in 'CSS' started by Navarone, Sep 20, 2007.

0
  1. #1
    I have some knowledge about how to make a slant using colors and borderdraw and div tag, but I need to make a slant that looks like this(see attched

    The hover state would fill in the burgundy color and the text would change from white to burgundy.

    Is there a way to build this slant in one declaration and use it for different menu items? What would the code look like?
     

    Attached Files:

    Navarone, Sep 20, 2007 IP
  2. Katy

    Katy Moderator Staff

    Messages:
    3,490
    Likes Received:
    513
    Best Answers:
    7
    Trophy Points:
    355
    #2
    Katy, Sep 20, 2007 IP
  3. KatieK

    KatieK Active Member

    Messages:
    116
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    58
    #3
    Navarone, I think you could get pretty close to that effect by using this Simplebits technique: simplebits.com/notebook/2004/07/12/bulletproof_slants.html
     
    KatieK, Sep 20, 2007 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    The big 'trick' to doing it imageless is overlapping your slanted div's using transparent borders - or in this case being an anchor, slanted spans.

    It ends up a LOT of code, a LOT of hacking for IE 6 and earlier since they don't support transparent borders 'out of box', but it can be done... but at 1.5k of CSS and five spans inside your anchor, you have to start to question if the gain of no extra handshake for an image is worth the drawback of that extra bulk - especially since it can pile up quickly the more times you use it on a page.

    If I was coding it, I'd just use a background image and skip all the hacks... it's probably lower bandwidth use that way since it's a third the CSS and a mere 357 byte .png.

    http://battletech.hopto.org/for_others/navarone/template.html

    Shows both techniques. The directory:
    http://battletech.hopto.org/for_others/navarone

    is unlocked so you can grab the gooey bits.

    Validates XHTML strict, CSS does not because of the IE hacks (remove those and it does), works in IE 6&7, FF, Opera and Safari (as always). The slanted border version does NOT work in IE 5.x because I left out the empty comments part - and even then it doesn't "stack" properly.

    It also does NOT work in IE6 or IE5.5 standalones because it relies on filter:chroma, but it does work in actual installs.

    But that image version? Works fine, and only relies on one image.

    Oh, and don't expect EITHER version to work with text-zoom in FF since it still resizes content like the sweetly retarded crack addict cousin to Netscape 4 that it is. You MIGHT be able to use EM instead of px to fix that, but safari has some issues adding things up properly.
     
    deathshadow, Sep 21, 2007 IP