Вырезать панель навигации разными цветами (с помощью CSS 2.1)

Question

Пожалуйста, помогите мне обрезать следующую панель навигации с помощью CSS2.1, с тенью, скругленными границами и без повреждения макета, если вы увеличиваете / уменьшаете масштаб:

Уже два дня я работаю над этим и не могу найти какой-либо способ, который будет выглядеть одинаково при масштабировании ...

EDIT:

• необходимо сделать с помощью CSS2.1

• Правая и левая границы округлены + имеют тень (справа налево соответственно)

• внизу тоже есть тень

Answer 1

Должно быть достаточно просто.

<div id="navbar">
    <a href="news" style="background-color: black;">News</a><a href="business" style="background-color: orange;">Business</a>......<a href="deals" style="background-color: blue;">Deals</a>
</div>

CSS:

#navbar > a {
   padding: 10px;
   box-shadow: 4px 4px 16px black;
   color: white;
}
#navbar > a:first-child { border-radius: 8px 0px 0px 8px; }
#navbar > a:last-child { border-radius: 0px 8px 8px 0px; }

Answer 2

Это довольно простое решение.Вы можете использовать только CSS.Я использовал jQuery для задания цвета, но это простой процесс ... http://jsfiddle.net/elclanrs/QtLv5/2/

html

<ul>
    <li><a href="#">Option1</a></li>
    <li><a href="#">Option2</a></li>
    <li><a href="#">Option3</a></li>
    <li><a href="#">Option4</a></li>
    <li><a href="#">Option5</a></li>
</ul>

css

li { float: left; }
a {
    display: block;
    padding: .5em 1em;
    text-decoration: none;
    color: black;
    font: bold 15px Arial;
}

/* If you assign unique ids to your menu items you can do */
#item { background: red; }