Наклонные разделители в меню

[vip]

Голова что-то отказывается соображать.
Как сделать меню как на картинке. Хотя бы в какую сторону двигаться?

 

[Даниил Виттманн]

#block {    border-bottom: 100px solid red;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    height: 0;    width: 100px;}

скиньте сайт, если это возможно

Edited July 3, 2014 by Даниил Виттманн

[vip]

Спасибо большущее!

Сейчас попробую совладать :-)

 

В IE7 конечно не будет работать?

Edited July 3, 2014 by vip

[Даниил Виттманн]

Спасибо большущее!

Сейчас попробую совладать :-)

 

В IE7 конечно не будет работать?

Нет, в IE вроде все хорошо

[vip]

Если я правильно понимаю, чтобы получить полосу справа мне надо для обертывающего блока сделать фон одного цвета и внутрь вложить блок другого цвета с отступом справа?

Edited July 3, 2014 by vip

[Даниил Виттманн]

Если я правильно понимаю, чтобы получить полосу справа мне надо для обертывающего блока сделать фон одного цвета и внутрь вложить блок другого цвета с отступом справа?

Легше конечно сделать PSD шаблон и не мучатся

Можно еще конечно SVG, но это большая морока http://codepen.io/chriscoyier/pen/LixbE

[vip]

  Я бы так и сделал, если бы контент был статичным. Надписи меняться будут

[Даниил Виттманн]

у вас есть пример этого меню, чтобы в живую взглянуть?

[vip]

Подзапутался уже.

<div class="account-heading"> <ul class="clearfix">  <li class="selected"><span><span>Персональная информация</span></span></li>  <li><span><a href="">История заказов</a></span></li>  <li style=""><span><a href="">Wish list</a></span></li> </ul></div>

.account-heading{border-left:solid 1px #6d6c6d;border-bottom:solid 1px #6d6c6d;}.account-heading ul li{float:left; font-size:1.25em;text-transform:uppercase;letter-spacing:0.1em;height:50px;line-height:50px;border-top:solid 1px #6d6c6d;position:relative;}.account-heading ul li.selected{color:#fff;font-weight:bold;position:relative;}.account-heading ul li span{display:block;border-bottom: 50px solid #fff;    border-right: 20px solid transparent;    height: 0;	padding-right:0;}.account-heading ul li.selected span span{position:relative;border-bottom: 50px solid #2e2d2e;    border-right: 20px solid transparent;    height: 0;	right:-19px;}

Edited July 3, 2014 by vip

[Даниил Виттманн]

http://jsfiddle.net/Wittmann/5y6xY/

[vip]

Да, я этот способ тоже уже нашел.

CSS3 правда.

 

Попробую все таки рамки с абсолютным позиционированием.