CSS3菜单边框-RightArrow效果 [英] CSS3 Menu Border - RightArrow Effect

问题描述

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

I want to achieve the right arrow effect using css3, i tried a bunch of times already but no luck.

http://jsfiddle.net/ffCDw/

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

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

解决方案

I had the same problem and the approach with the borders wasn't quite satisfying enough for me, especially if you want to use :hover...

HTML

I put a span inside the div, this is for the arrow only.

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

CSS

span get's position:absolute;

Here the span:after is positioned and transformed (-45deg), so it points to the right.

And finally, by putting span overflow:hidden, there is only the part left visible that points to the right...

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;
}

I hope this is understandable. The only thing left is to style your div and span:after and if you want define the :hover states aswell on these elements.

Please note not to give the span any background-color

And here is a working example:

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

这篇关于CSS3菜单边框-RightArrow效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！