CODEWITHSUNDEEP
htmlcss
Antonio Papa
Antonio Papa

Reputation: 1666

CSS3 navigation arrow

I have a navigation that looks like this:

enter image description here

The selected page has an orange arrow which i made it with an png image.My question is can i make that arrow with css/css3? The code is:

nav ul li {
    display: block;
    padding: 25px 40px 25px;
}

nav ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

nav ul li.selected a{
    color: #ef5a29;
}

nav ul li.selected{
    background-image: url('../img/arrow.png');
    background-position: right;
    background-repeat: no-repeat;
}

Upvotes: 4

Views: 3487

Answers (3)

Arazu
Arazu

Reputation: 441

Here's an example you could use. You can change the .selected to :hover(or copy), to get a hover effect on it, maybe even with a different color on it.

<style>
a.selected .arrow-left{
    width: 0; 
    height: 0; 
    /* Border top and bottom define the height of the arrow. */
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:25px solid #EF5A29; /* The width of the arrow 25px and orange color */
    margin-left:10px; /* This so the arrow has some room from the text */ 
    display:block;
    float:right;
}
ul {
    border-right: 5px solid #EF5A29; /* The orange border */
    display:block;
    width:      150px; /* so it does not get 100% with automaticly */

}
li {
    list-style: none; /* Remove the list bullits */ 
}
li a{
    width:      150px;
    display:    block;
    padding-right:10px;
}
</style>
<ul>
<li><a class="selected">Home<span class="arrow-left"></span></a></li>
<li><a>Portfolio<span class="arrow-left"></span></a></li>
<li><a>About<span class="arrow-left"></span></a></li>
</ul>

Upvotes: 2

Martin Turjak
Martin Turjak

Reputation: 21214

Using some magic of the :after pseudo object, you don't even need to change the html markup =)

You could try something like that:

nav ul li.selected:after{
    content:'';
    float:right;
    width: 0; 
    height: 0; 
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-right: 20px solid #ef5a29;
}

or as I did in the jsfiddle below:

nav ul li.selected a:after{
    content:'';
    position:absolute;
    top:20px;
    right:0;
    width: 0; 
    height: 0; 
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-right: 20px solid #ef5a29;
}

Note also that I moved the padding from li and added display:block to a for this example.

here is the jsfiddle

Upvotes: 2

The Mechanic
The Mechanic

Reputation: 2329

Yes Absolutely you can make this triangle by css3 check this below links here is a good example http://mrcoles.com/blog/callout-box-css-border-triangles-cross-browser/

http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

Upvotes: 2

Related Questions