CSS3 Menu Border - RightArrow Effect

问题

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

回答1:

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/

回答2:

If you want to add an arrow to the right edge of these elements:

Updated fiddle

We're using CSS to add a triangle element after your anchor tag with this block:

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

And then increasing the left margin of your li elements to account for the additional space these take up. You can play with the length of the triangle by increasing the pixel size of the border-left property, but be sure to increase the margin of the li accordingly.

来源：https://stackoverflow.com/questions/15298723/css3-menu-border-rightarrow-effect

标签

css

css3

css-shapes