李上的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> 

洛勒姆


等分


前庭


#边栏ul{margin:0；}
#侧边栏li{背景：无重复滚动0 0#336699；颜色：白色；字体大小：25px；列表样式：无外部无；边距：25px 0；填充：0 0 10px；文本对齐：中心；垂直对齐：中间；}
.notch{float:左；边框颜色：透明白色；边框样式：实心；边框宽度：20px；宽度：0；高度：0；}
.point{float:右侧；边框颜色：白色透明；边框样式：实心；边框宽度：20px；宽度：0；高度：0；}

---

但是我宁愿不要在html中包含所有的设计内容，也不要在文本之前移动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>

洛勒姆


等分


前庭

使用以下方法：

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

&rarr；名单
&rarr；等等

这将显示为：

→ 列表

---

→ 等等。

这实际上并没有改变它的渲染方式或任何东西。它也不能减少非语义html的数量。你试过了吗？我在FF、Chrome、IE7/8中进行了测试。你用什么浏览器？