CSS Стрелки на LI

Question

Попытка использовать метод 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> 

Я предпочел бы не использовать изображения или JQuery, но только CSS

Я был в состоянии использовать

<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

Answer 1

Move div.point Перед текстом. Это будет хорошо работать.

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

Answer 2

Используйте следующее:

<ul style="list-style-type:none;"> 
<li>&rarr; List</li> 
<li>&rarr; Etc.</li> 
</ul> 

Это покажет, как:

→ Список
→ Etc.