Question

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

Answer 1

Move div.point before text. This will work well.

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