css - CSS3 菜单边框 - 右箭头效果

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

我遇到了同样的问题，边框的方法对我来说不够满意，特别是如果你想使用 :hover ...

HTML

我在 div 中放了一个跨度，这仅用于箭头。

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

CSS

span 获取的位置：绝对；

这里 span:after 被定位和转换（-45deg），所以它指向右边。

最后，通过设置跨度溢出：隐藏，只有左边可见的部分指向右边......

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:after的样式，如果你想在这些元素上定义 :hover 状态。

请注意不要给跨度任何背景颜色

这是一个工作示例：

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

Answer 2

如果要在这些元素的右边缘添加箭头：

更新的小提琴

我们正在使用 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。