Forums

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


      <div id="sidebar">
            <ul>
                <li>Lorem</li>
                <li>Aliquam</li>
                <li>Vestibulum</li>
            </ul>
        </div>

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

i have been able to use

        <div id="sidebar">
        <ul>
            <li>
                <div class="notch">
                </div>
                Lorem<div class="point">
                </div>
            </li>
            <li>
                <div class="notch">
                </div>
                Aliquam<div class="point">
                </div>
            </li>
            <li>
                <div class="notch">
                </div>
                Vestibulum<div class="point">
                </div>
            </li>
        </ul>
    </div>
    <style type="text/css">
        #sidebar ul { margin: 0 0 0 0; }
        #sidebar li { background: none repeat scroll 0 0 #336699; color: White; font-size: 25px; list-style: none outside none; margin: 25px 0; padding: 0 0 10px; text-align: center; vertical-align: middle; }
        .notch { float: left; border-color: Transparent Transparent Transparent White; border-style: solid; border-width: 20px; width: 0; height: 0; }
        .point { float: right; border-color: White White White Transparent; border-style: solid; border-width: 20px; width: 0; height: 0; }
    </style>

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

jamy_za

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


<div id="sidebar">
	<ul>
		<li>Lorem</li>
		<li>Aliquam</li>
		<li>Vestibulum</li>
	</ul>
</div>

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

jamy_za

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 .

adrusi

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

treehouse : what would you like to learn today?

Forums

CSS Arrow for LI