Grow your CSS skills. Land your dream job.

CSS Arrow for LI

  • # September 30, 2010 at 9:43 am

    Trying to use the
    http://www.dinnermint.org/css/creating-triangles-in-css/
    method to create an arrow


    _________________

    Lorem
    / /
    /________________/

    using this using only the



    I would prefer to not use images or jquery but just css

    i have been able to use

            

    but would rather not have all that design stuff in the html

    # September 30, 2010 at 10:10 am

    Honestly i would just use an image, why try to make something harder than it has to be? Using the shape tool in photoshop choose the arrow and then just draw it really quick, trim it down after with the trim tool and then your done, it will be like 500bytes if u pick .png

    # September 30, 2010 at 10:32 am

    You won’t be able to do that specifically with this html:



    Here is an image which might clear things up for you.

    # October 1, 2010 at 9:32 am

    I think this is what you want:

    http://dl.dropbox.com/u/10548536/point.html

    # October 1, 2010 at 12:33 pm

    Ahhh, before and after pseudo classes… Nice, I’ve never thought of that.

    Note: this will have compatibility issues in IE6 and 7

    # October 1, 2010 at 1:02 pm

    Maybe add some jQuery to append and prepend the divs in, That should fix it for IE6 and 7 .

    # October 1, 2010 at 9:42 pm
    li:before { width: 0; height: 0; line-height: 0; display: block; content: "."; font-size: 0; border-width: 5px; border-color: black transparent transparent transparent; }
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".