LI上的CSS箭头

尝试使用 http://www.dinnermint.org/css/creating-triangles-in-css/ 方法创建箭头

 _________________
 \                \
  \   Lorem        \
  /                /
 /________________/

仅使用

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

    <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> 

但不希望在html中包含所有的设计内容