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
這並不真正改變它呈現的方式或任何東西。它也不減少非語義html的數量。 – MarkKGreenway 2010-09-30 13:46:17
你有試過嗎?我已經在FF,Chrome,IE7/8上測試過了。你使用什麼瀏覽器? – 2010-09-30 14:08:36