CSS menu breadcrumbs with linear gradient

Question

I want to create a cool breadcrumbs menu with CSS3, i see many tuto about it on the web - this example barely fits my needs http://css-tricks.com/examples/TriangleBreadcrumbs/

.breadcrumb li a {
            color: white;
            text-decoration: none; 
            padding: 10px 0 10px 55px;
            background: brown;
            background-image: linear-gradient(to bottom, brown, black);
            position: relative; 
            display: block;
            float: left;
        }
        .breadcrumb li a:after { 
            content: " "; 
            display: block; 
            width: 0; 
            height: 0;
            border-top: 50px solid transparent;          
            border-bottom: 50px solid transparent;
            border-left: 30px solid hsla(34,85%,35%,1);
            position: absolute;
            top: 50%;
            margin-top: -50px; 
            left: 100%;
            z-index: 2; 
        }   
        .breadcrumb li a:before { 
            content: " "; 
            display: block; 
            width: 0; 
            height: 0;
            border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
            border-bottom: 50px solid transparent;
            border-left: 30px solid white;
            position: absolute;
            top: 50%;
            margin-top: -50px; 
            margin-left: 1px;
            left: 100%;
            z-index: 1; 
        }

But i would like to have a vertical linear gradient on the menus button, this gradient should also be inverted when the mouse is hover.

I know i can do this with a sprite but is possible with CSS3 only ?

Answer 1

You need to change the technique to achieve this.

The CSS is :

.breadcrumb { 
    list-style: none; 
    overflow: hidden; 
    font: 18px Helvetica, Arial, Sans-Serif;
}

.breadcrumb li a {
    color: white;
    text-decoration: none; 
    padding: 10px 30px 10px 25px;
    background: transparent;
    position: relative; 
    display: block;
    float: left;
    z-index: 1;
}

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 99%; 
    height: 50%;
    background: linear-gradient(to bottom, lightgreen, green); 
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1; 
    -webkit-transform: skewX(35deg); 
    transform: skewX(35deg); 
}

.breadcrumb li a:before { 
    content: " "; 
    display: block; 
    width: 99%; 
    height: 50%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: -1; 
    background: linear-gradient(to bottom, green, black); 
    -webkit-transform: skewX(-35deg); 
    transform: skewX(-35deg); 
}

.breadcrumb li a:hover:after { 
    background: linear-gradient(to bottom, black, green); 
}

.breadcrumb li a:hover:before { 
    background: linear-gradient(to bottom, green, lightgreen); 
}

demo

How does it work?

I keep the base element transparent, and only use from it the text.

Then, the 2 pseudo elements are layered in the top half of the base element, slanted backwards, and the bottom half of the base element, slanted forward.

You can easily adjust the angle of the effect.

And finally, the hover state, just changing the gradients.

Only drawback: since the gradient is split in two parts, you need to find the color that matches in the mid point.

I changed your request from brown to green, so it is more easily seen.

Answer 2

Yes, It's Possible with CSS3.

Use this Site for make vertical and horizontal linear gradients and get css codes.

http://colorzilla.com/gradient-editor/