Question

I need to underline my elements (menu items) with a line which has an gradient on BOTH ends.
It can’t simply be a graphic (even stretched one), since the width of elements may vary significantly.

The desired effect:

What I did, was to create a line, 1000px wide, with gradient on both ends, then append following HTML <div><div class="right">&nbsp;</div></div> to every element to be underlined.
The CSS is following

        #navmenu li div
        {               
            height: 1px;
            background-image: url('images/1000glight.png');
            background-repeat: no-repeat;                                       
        }
        
        
        #navmenu li div.right
        {
            width:35px;
            float: right;
            background-position: -965px 0;              
            background-image: url('images/1000glight.png');
            background-color: #212121;
        }

This however is not truly alpha. I need to specify the background color of "right-side" div in order to "cover" the image (1000px line) which is below.

Any ideas how could I improve it, keeping pure CSS?

Answer 1

Use the border-image gradient CSS3.

div {
    width:200px;
    border-style:solid;
    border-width:15px;
    text-align: center;
    -webkit-border-image: 
           -webkit-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 100%) 0 0 100% 0/0 0 15px 0 stretch;
}

Demo here.

This will only work with Webkit browsers (Chrome, Safari etc). There should be some vendor specific equivalents.