Наклонная навигация

Question

Я пытаюсь создать меню навигации с наклонными фигурами, как показано на фотографии ниже. Может ли кто-нибудь дать мне какой-либо вклад в лучший способ сделать это?

Любая помощь была бы принята с благодарностью!

Answer 1

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

Заканчивать скрипку: http://jsfiddle.net/HRWqq/

HTML:

<ul> 
    <li><a href="#">Some Text</a></li> 
    <li><a href="#">Some Text</a></li> 
    <li><a href="#">Some Text</a></li> 
    <li><a href="#">Some Text</a></li> 
    <li><a href="#">Some Text</a></li> 
</ul>​ 

CSS:

li { 
    float: left; 
    background: #ccc; 
    margin-right: 50px; 
} 
li > a { 
    text-decoration: none; 
    display: block; 
    position: relative; 
    line-height: 40px; 
    padding: 0 8px; 
} 
li > a:before { 
    content: ''; 
    position: absolute; 
    border: 20px solid #ccc; 
    border-left-color: transparent; 
    border-top-color: transparent; 
    right: 100%; 
    top: 0; 
} 
li > a:after { 
    content: ''; 
    position: absolute; 
    border: 20px solid #ccc; 
    border-right-color: transparent; 
    border-bottom-color: transparent; 
    left: 100%; 
    top: 0; 
} 





li:first-child > a { 
    background: #aaa; 
} 
li:first-child > a:after { 
    border-top-color: #aaa; 
    border-left-color: #aaa; 
} 

li:last-child > a { 
    background: #ddd; 
} 
li:last-child > a:before{ 
    border-right-color: #ddd; 
    border-bottom-color: #ddd; 
} 
li:last-child > a:after { 
    border: 0; 
} 

Answer 2

Используйте Map Image. http://en.wikipedia.org/wiki/Image_map