Верстка блока и рисование на CSS

Всем здравствуйте! У меня такой вопрос, как лучше сверстать вот такой блок? Стрелки навигации, логотип и список рядом. Выглядит это более,менее сейчас, как на картинке. Но это внешняя красота :) Меня смущает, что вставлять картинки стрелок - это не очень хороший вариант. Можно ли их нарисовать на CSS? Или есть другие лучшие варианты?
Я это реализовала сейчас таким образом
HTML

• Администрация
• Документы
• Правоохранительные органы
• Здоровье
• Образование
• Торговые центры
• Аварийные службы

CSS
.logo_raion { display: inline-block; margin-right: 30px; vertical-align: center; } .raion_nav { display: inline-block; font-family: FRAMDCN; font-weight:400; font-size:2em; padding: 25px 0 0 0; } .raion_nav li { margin-top: 15px; }

Ответ

Псевдоэлементы + трансформации + линейный градиент. Плюс метода в том, что размер стрелок надо менять в одном месте и не подгонять под новые размеры кучу свойств.
.content { display: inline-block; vertical-align: top; width: 200px; } .left, .right { position: relative; width: 30px; height: 70px; display: inline-block; vertical-align: top; } .left:before, .right:before, .left:after, .right:after { position: absolute; content: ''; width: 40%; height: 50%; background-image: linear-gradient(to right, #ccc 0%,#ccc 15%,#fff 30%,#fff 70%,#ccc 85%,#ccc 100%); transform-origin: 0 0; transform: skewX(28deg); } .right:after { transform: skewX(-28deg); transform-origin: 100% 100%; top: 50%; } .left:before { transform-origin: 0 100%; transform: skewX(-28deg); } .left:after { top: 50%; }