CSS эффект скошенности

Недавно CNN поменяли дизайн своего сайта, так вот новый дизайн включает в себя красивую навигационную панель со скошенным эффектом краев каждого элемента.
Я думаю, что этот эффект широко известен среди опытных CSS разработчиков, однако многие начинающие веб-дизайнеры, вероятно прибегают к картинкам для создания скошенного эффекта. Так, в этом кратком руководстве я покажу вам, как создать навигационную панель со скошенными краями, используя чистый CSS. Здесь демо того что у нас получиться, если вам не понравится эффект можете не читать дальше
Во первых нам нужно создать неупорядоченный список:

<ul id="navigation">
	<li class="first"><a href="#">Дом</a></li>
	<li><a href="#">Видео</a></li>
	<li><a href="#">Новости+</a></li>
	<li><a href="#">США</a></li>
	<li><a href="#">Мир</a></li>
	<li><a href="#">Политика</a></li>
	<li><a href="#">Представление</a></li>
	<li><a href="#">Техника</a></li>
	<li><a href="#">Здоровье</a></li>
	<li><a href="#">Жизнь</a></li>
	<li><a href="#">Путешествия</a></li>
	<li><a href="#">Деньги</a></li>
	<li><a href="#">Спорт</a></li>
</ul>

Единственная вещь которая нуждается в обьяснении это класс “first”, который поможет на округлить эффект
Далее CSS для списка <ul> c id navigation:

#navigation {
    list-style: none;
    background: #b60002;
    overflow: hidden;
    width: 962px;
}

Здесь мы описали весь список, придали ему цвет, ширину и т.д.
Следующим шагом мы должны описать стили для <li>. Вот код:

#navigation li {
    float: left;
    border-right: solid 1px #ca0002;
    height: 35px;
}

Здесь мы переделали вертикальный список в горизонтальный, указали высоту , высота будет совподать с высотой списка так как список у нас уже горизонтальный,
и определили правую границу она нужна для того самого эффекта скошенности, как в CNN , то есть он будет состоять из двух границ из светлой границы и темной светлую границу мы только что описали он будет вот таким вот цветом #ca0002.
Теперь нам нужно описать ссылки находящиеся в <li> описываем:

#navigation li a:link, #navigation li a:visited {
    text-decoration: none;
    display: block;
    height: 35px;
    color: #fff;
    line-height: 35px;
    padding: 0 9px 0 9px;
    border-right: solid 1px #990000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
}

Важным здесь является правильное установление границ. Таким образом, цвета границ <a> темнее чем на границах <li> элемента, что позволяет создать эффект скошенности с помощю CSS.
Таким образом, хотя мы не можем создать двойной границы одного элемента без картинок, мы можем от этого избавиться, воспользовавшись вложенными элементами, которые входят в состав каждой панели навигации, ссылки элемнеты списка.
Далее устанавливаем свойство Hover для ссылок, то есть эффект при наведении мыши:

#navigation li a:hover {
    background: #990000;
    color: #fff;
 }

Результату не хватает только одного элемента. Поскольку каждая кнопка имеет двойную границу справа, это означает что, что самая крайняя левая кнопка не будет иметь границы слева. Вот для этого мы прописали первому элементу класс “first” описываем:

#navigation li.first {
    border-left: solid 1px #990000;
}
#navigation li.first a:link, #navigation li a:visited {
    border-left: solid 1px #ca0002;
    padding: 0 9px 0 9px;
}

Вот и все, У нас получились такие же кнопки как на сайте CNN. Демо