CSS - How to Draw a Multi-Coloured Line?

问题

I have a navbar and for a particular element, instead of the default white underline I wish to colour the line using 5 colours and was wondering if this was possible?

The structure is as follows:

HTML

<div id="underlinemenu" class="clearfix">
    <ul>
        <li class="page_item page-item-67">
            <a href="#">Home</a>
        </li>
        <li class="page_item page-item-69 current_page_item">
            <a href="#">The Blogs</a>
        </li>
        <li class="page_item page-item-60">
             <a href="#">Meet the Bloggers</a>
        </li>
        <li class="page_item page-item-2">
            <a href="#">Gallery</a>
        </li>
    </ul>
</div>

CSS

#underlinemenu{
    padding:0;
    margin:0;
    padding-bottom: 30px;
    font-size: 14px;
}

#underlinemenu ul{
    float: left;
    font-weight: bold;
    width: 770px;
    height: 57px;
    background-color: #242129;
    margin: -14px 0 -30px 0;
}


#underlinemenu ul li{
    display: inline;
    float: left;
    color: #ffffff;
    padding: 21px 40px 0px 8px; 
}

#underlinemenu ul li a{
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding: 5px;
}

#underlinemenu ul li a:hover{
    color: #ffffff;
    padding-bottom: 16px;
    border-bottom: 3px solid #ffffff;
}

.current_page_item {
    color: #ffffff;
    padding: 21px 10px 16px 5px !important;
    margin: 0 30px 0 3px;
    border-bottom: 3px solid #ffffff;
}

Fiddle

http://jsfiddle.net/SMrYF/

Colour Codes

#a3ad24
#4594cc
#c4262e
#d9709c
#ffa100

Any help is much appreciated.

UPDATE

mockup can be found here: http://img59.imageshack.us/img59/2866/navbarf.jpg

回答1:

Pure CSS2 Option

Utilize pseudo-elements. Add position: relative; to the .current_page_item (or li if you plan on using this for the hover). Then...

New Answer (resolves IE bug)

Adding the following code yields the results seen in this fiddle. It differs from the original answer by having the pseudo-elements use their own bottom border to make the colors rather than the background-color of the pseudo-element. This seems to have resolved IE's stupidity.

.current_page_item:before,
.current_page_item:after,
.current_page_item a:before,
.current_page_item a:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 20%;
    bottom: -3px;
    left: 20%;
    border-bottom: 3px solid #4594cc;
}

.current_page_item:after {    
    left: 40%;
    border-bottom-color: #c4262e;
}
.current_page_item a:before {    
    left: 60%;    
    border-bottom-color: #d9709c;
}
.current_page_item a:after {    
    left: 80%;    
    border-bottom-color: #ffa100;
}

.current_page_item:hover {
    border-color: #ffffff;
}

.current_page_item:hover:before,
.current_page_item:hover:after,
.current_page_item:hover a:before,
.current_page_item:hover a:after {   
    border-bottom-color: #ffffff;
}

Original Answer (had bug in IE because it cannot seem to understand height: 3px)

Adding the following code (not sure if you need the hover code for the current page or not, but I included if needed) yields the results seen in this fiddle:

.current_page_item:before,
.current_page_item:after,
.current_page_item a:before,
.current_page_item a:after {
    content: '';
    position: absolute;
    height: 3px;
    width: 20%;
    bottom: -3px;
    left: 20%;
    background-color: #4594cc;
}

.current_page_item:after {    
    left: 40%;
    background-color: #c4262e;
}
.current_page_item a:before {    
    left: 60%;
    background-color: #d9709c;
}
.current_page_item a:after {    
    left: 80%;
    background-color: #ffa100;
}

.current_page_item:hover {
    border-color: #ffffff;
}

.current_page_item:hover:before,
.current_page_item:hover:after,
.current_page_item:hover a:before,
.current_page_item:hover a:after {
    background-color: #ffffff;
}

NOTE: I've noticed IE seems to have issues being intelligent enough to determine the difference between 3px and 4px height in some cases, which causes an annoying misalignment of 1px at certain points.

回答2:

-snip previous answer-

Ok, so I came up with an alternative solution. I used five divs positioned at the bottom of each li with a width of 20%. Seems like an ugly solution, but hey, it works!

http://jsfiddle.net/VdMPL/6/

回答3:

A few options

Add a bg image rather than a bottom border (using a static image file).
Add a linear gradient for the bg image (not supported on IE9 and earlier).
Use the border-image style (not supported on IE9 and earlier).

If the hyperlinks aren't fixed width, you could set the background-size (not supported on IE9 and earlier), or add an img tag to each hyperlink (statically, or using JS or jQuery) and scale it to 100% width and fixed height.

Using a linear gradient would involve defining 10 gradient points (2 for each color) (assuming it's possible to specify more than 2 gradient points).

回答4:

You can also do something unholy and use CSS Gradients. Here's a hacked together fiddle the only works in Safari/Chrome: http://jsfiddle.net/ASLs3/1/

But as others have said you should probably just use a background image.

来源：https://stackoverflow.com/questions/11936982/css-how-to-draw-a-multi-coloured-line

标签

css

css3