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>

这将显示为：

→列表
→等等。

Answer 2

在文本之前移动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>

LI上的CSS箭头

2 个答案: