flèches CSS sur LI

Question

Essayer d'utiliser la http://www.dinnermint.org/css/creating-triangles-in-css/ méthode pour créer une flèche

_________________ 
\    \ 
    \ Lorem  \ 
/   /
/________________/ 

en utilisant ce en utilisant uniquement le

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

Je préférerais ne pas utiliser des images ou jquery mais juste css

J'ai été en mesure d'utiliser

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

mais aurait plutôt pas tout ce genre de choses de conception dans le code HTML

Answer 1

de div.point Déplacer avant le texte. Cela fonctionnera bien.

<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

Utilisez les éléments suivants:

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

Cela montrera que:

→ Liste
→ Etc.