CSS Arrow for LI

[hurricanepkt]

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

_________________

                

   Lorem        

/                /

/________________/

 

using this using only the

Lorem


Aliquam


Vestibulum






 

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

i have been able to use

        










Lorem












Aliquam












Vestibulum

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

[zackw]

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

[jamygolden]

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

Lorem


Aliquam


Vestibulum

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

[Damion]

I think this is what you want:
http://dl.dropbox.com/u/10548536/point.html

[jamygolden]

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

Note: this will have compatibility issues in IE6 and 7

[Damion]

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

[Historical Forums User]

li:before { width: 0; height: 0; line-height: 0; display: block; content: "."; font-size: 0; border-width: 5px; border-color: black transparent transparent transparent; }

[Author]

Posts