2010-09-30 115 views
0

嘗試使用 http://www.dinnermint.org/css/creating-triangles-in-css/ 方法,使用這種只使用CSS箭頭

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

我寧願不使用圖像或jQuery的只是CSS來創建一個箭頭

_________________ 
\    \ 
    \ Lorem  \ 
/   /
/________________/ 

我已經能夠使用

<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

回答

0

移動文字前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> 
+0

這並不真正改變它呈現的方式或任何東西。它也不減少非語義html的數量。 – MarkKGreenway 2010-09-30 13:46:17

+0

你有試過嗎?我已經在FF,Chrome,IE7/8上測試過了。你使用什麼瀏覽器? – 2010-09-30 14:08:36

2

使用以下:

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

這將顯示爲:

→列表
→等等