CSS3 — как сверстать декоративную линию?

Здравствуйте!

Ломал сегодня голову над тем, как красиво сверстать декоративную линию в навигации. Скрин меню приложил, нужно сверстать линию между элементами.

Сейчас линия - это фоновая картинка, но что-то мне говорит, что так оставлять нельзя, слишком легкий способ, да и запрос дополнительный.

Html:

<ul class="mainnav">
        <li><a href="/events">События</a></li>
        <li><a href="/site/about-us.html">О проекте</a>
            <ul>
                <li><a href="/site/contact.html">Контакты</a></li>
                <li><a href="/site/we.html">Сотрудники</a></li>
            </ul>
        </li>
    </ul>


Часть кода CSS

.mainnav li {
    margin-top: 4px;
    padding: 9px 15px 8px 10px;
    display: inline-block;
    position: relative;
    background: url(img/mainmenu-line.jpg) no-repeat right -4px
}

ul.mainnav>li:hover {
    background: #0c8b5d
}


Скрин:
17b05275bff2.png

Первое, что пришло на ум, box-shadow. Но верстать стал не так давно, получится ли? Потом пробовал добавить тег span и в нем указать два тега: border-left и border-right, может еще есть идеи или опыт верстки подобных линий?

Здесь линия нужна из 2 цветов, этого будет достаточно, чтобы забыть про фоновую картинку.

Спасибо.
  • Вопрос задан
  • 2713 просмотров
Пригласить эксперта
Ответы на вопрос 2
shiza36
@shiza36
akurganow.ru/2012/07/09/gradiient-dlia-ghranits-bo...
Там все подробно расписано, ваши варианты не подойдут. :)
Ответ написан
Комментировать
Bandicoot
@Bandicoot
Вась-программист
Думаю, границу лучше задать через border
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы