Сразу хочу оговориться, что решение не мое, просто очень понравилась статья, поэтому публикую ее у себя 
Средствами CSS умельцы научились верстать острые углы. Изложенный ниже способ более узкоспециализирован – с его помощью можно сверстать красивые навигацинные стрелки, не используя при этом изображения.
Стрелки будут с эффектом .hover:
Для того, чтобы получились такие стрелки, для начала нужно создать css-стили:
[code lang="css"]* {margin: 0; padding: 0} html, body {width: 100%; height: 100%; position: relative} #wrap {width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px} .arrow.left {float: left; margin-right: 20px}
/* Сами стрелки */
.arrow {
height: 40px;
overflow: hidden;
position: relative;
width: 20px;
}
.arrow a, .arrow i {
display: block;
height: 0;
}
.arrow a {
border-bottom: 20px solid #fff;
border-top: 20px solid #fff;
position: relative;
width: 20px;
}
.arrow a i {
border-bottom: 10px solid #ccc;
border-top: 10px solid #ccc;
line-height: 0; /* for IE6 */
position: absolute;
width: 0;
}
.arrow a:hover i{
border-top-color: #333;
border-bottom-color: #333;
}
.left a {
border-right: 20px solid #ccc;
left: -20px;
}
.left a i {
border-right: 10px solid #fff;
left: 30px;
top: -10px;
}
.left a:hover {
border-right-color: #333;
}
.left a:hover i {
border-right-color: #fff;
}
.right a {
border-left: 20px solid #ccc;
left: 0;
}
.right a i {
border-left: 10px solid #fff;
left: -20px;
top: -10px;
}
.right a:hover {
border-left-color: #333;
}
.right a:hover i {
border-left-color: #fff;
}[/code]
Код HTML:
[code lang="html"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head><title>Стрелки без картинок</title></head>
<body>
<div id="wrap">
<div class="arrow left"><a href="#"><i></i></a></div>
<div class="arrow right"><a href="#"><i></i></a></div>
</div>
</body>
</html>[/code]
Результат: http://drugpusher.narod.ru/css-arrows.html
Очень важно не забывать про Doctype и про свойство IE6: при наличии свойства background у элемента i, IE6 задает ему внутренние вертикальные отступы.
Автор статьи: @lex
Подобная картинка весит намного меньше чем весь этот код, да и точно будет отобюражаться на любом устройстве.
возможно и так, но мне интересно будет посмотреть на лица (а главное – реакцию) пользователей с отключенной графикой.
главное, как мне кажется, эффективная. меньше картинок – быстрее загрузка
Интересная штука!