CODEWITHSUNDEEP
csscss-shapes
Jeremi Liwanag
Jeremi Liwanag

Reputation: 964

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

Upvotes: 1

Views: 1178

Answers (2)

MMachinegun
MMachinegun

Reputation: 3074

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;

div and span

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

span:after

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

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

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/

Upvotes: 4

Josh Burgess
Josh Burgess

Reputation: 9567

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.

Upvotes: 1

Related Questions