Question

我想使用css3实现正确的箭头效果，我已经尝试了很多次但没有运气。

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

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

Answer 1

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

<强> HTML

我在div中放了一个span，这只是箭头。

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

<强> CSS

span get的位置：绝对;

div and span

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

span:after

最后，通过将span overflow：hidden，只剩下可见的部分指向右边......

after setting span overflow:hidden

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：在之后的样式，如果你想要定义：悬停状态以及这些元素。

请注意，不要给 span 任何背景颜色

这是一个有效的例子：

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

Answer 2

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

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的边距。

CSS3菜单边框 - RightArrow效果

2 个答案: