Попытка использовать метод http://www.dinnermint.org/css/creating-triangles-in-css/ создать стрелкуCSS Стрелки на LI
_________________
\ \
\ 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
Это оленья кожа на самом деле изменить способ визуализирует или вообще ничего. Также он не уменьшает количество не семантического html. – MarkKGreenway
вы попробовали? Я тестировал в FF, Chrome, IE7/8. Какой браузер вы используете? –