Верстка такого пути по сайту

[Светлана Г.]

Добрый вечер!

Нужно сверстать вот такое:

 

Моя верстка здесь:

http://jsfiddle.net/e4z1bLrf/

 

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

Пожалуйста, помогите.

[swandev]

поверните с помощью rotate квадрат верхним\правым бордером

[Светлана Г.]

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

http://jsfiddle.net/e4z1bLrf/2/

Edited February 18, 2015 by Светлана Г.

[satantx]

Как вариант сделайте два треугольника

http://jsfiddle.net/satantx/e4z1bLrf/4/

[Светлана Г.]

Как вариант сделайте два треугольника

http://jsfiddle.net/satantx/e4z1bLrf/4/

Спасибо Вам большое, это решение мне подходит.

[Great Rash]

http://codepen.io/GreatRash/pen/PwROMg

[satantx]

http://codepen.io/GreatRash/pen/PwROMg

 

Магия!))

[Светлана Г.]

http://codepen.io/GreatRash/pen/PwROMg

Волшебно !

[Anna Zharova]

Вот это пилотаж