CSS3 Граница меню - Эффект RightArrow

Question

Я хочу добиться эффекта правой стрелки, используя css3, я попробовал кучу раз уже, но не повезло.

http://jsfiddle.net/ffCDw/

.menu li { 
list-style-type: none; 
display:inline; 

} 
.menu li a { 
padding: 0 20px; 
background: green; 
color: #fff; 
} 

Answer 1

Если вы хотите добавить стрелку к правому краю этих элементов:

Updated fiddle

Мы используем CSS, чтобы добавить элемент треугольника после тега привязки с данным блоком:

.menu li a:after{ 
    height:0; 
    width: 0; 
    top: 0; 
    left: 100%; 
    position:absolute; 
    content: ' '; 
    border-left: solid 5px green; 
    border-top: solid 9px transparent; 
    border-bottom: solid 9px transparent; 
} 

И затем увеличивая левое поле ваших li элементов, чтобы учесть дополнительное пространство, которое они занимают. Вы можете играть с длиной треугольника, увеличивая размер пикселя свойства border-left, но обязательно увеличьте границу li соответственно.

Answer 2

У меня была та же проблема, и подход с границами не вполне удовлетворительна для меня достаточно, особенно если вы хотите использовать: парить ...

HTML

Я поставил срок внутри div, это только для стрелки.

<div class="arrow"> 
    I am the first arrow 
    <span></span> 
<div> 

CSS

положение

SPAN ПОЛУЧИТЬ в: абсолютная;

Здесь пролете: после того, как позиционируется и трансформируют (-45deg), так что он указывает вправо.

И наконец, положить перелива SPAN: скрытый, есть только часть оставили видно, что точки справа ...

span { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: -1.625em; 
    width: 2em; 
    height: 2.5em; 
    overflow: hidden; 
    z-index: 10; 
} 
span:after { 
    content: ""; 
    position: absolute; 
    top: -3px; 
    left: -1em; 
    width: 2em; 
    height: 2.5em; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    border: 1px solid #777; 
    background: #60bee7; 
} 

Я надеюсь, что это понятно. Осталось только стилизовать ваши div и span: после, и если вы хотите определить: наведение накладывается также на эти элементы.

Пожалуйста, обратите внимание, чтобы не дать сроку любому цвету фона

А вот рабочий пример:

http://jsfiddle.net/marczking/PyKFT/