LI 上的 CSS 箭头

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

使用以下内容:

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

这将显示为:

→列表
→ 等