How to create a tags box like mixx & delicious?

i tried to search in google but no one talked about this.

i want a css solution to create a liquid tag box like the orange ones in this :

http://www.mixx.com/stories/10402914/haiti_us_gov_t_grants_matching_3_to_1_donations_to_worldvision_for_haiti

so, even if the word is long the tag box will fit it.

i want the same shape

Thanks

This is a css technique called sliding doors. You can find a good article about it here: http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx

Mixx uses this technique with just one image. The image is attached to the <li> tag and to the <a> tag. The overlapping of the images makes sure that the arrow is just as long as it is needed.

Mixx uses an ordered list, although an unordered one will do just fine:

<ol class="tag-list">
    <li><a href="http://www.mixx.com/tags/crisis-assistance" rel="tag" title="crisis assistance">crisis assistance</a></li>
    <li><a href="http://www.mixx.com/tags/earthquake" rel="tag" title="earthquake">earthquake</a></li>
    <li><a href="http://www.mixx.com/tags/haiti" rel="tag" title="haiti">haiti</a></li>
    <li><a href="http://www.mixx.com/tags/haiti" rel="tag" title="haiti">haiti</a></li>
    <li><a href="http://www.mixx.com/tags/world-vision" rel="tag" title="world vision">world vision</a></li>
</ol>

Set your list at the top level so that there are no bullets or other graphics associated with the list items:

ol, ul {
    list-style:none outside none;
}

Next, set your list items so that they display horizontally (inline). Mixx have used float: left; but you might also use display: inline;:

ol.tag-list li {
    background:url("../images/layout/tag-bg.gif") no-repeat scroll 100% 0 transparent;
    float:left;
    margin:0 0.8em 0.8em 0;
    padding:0 1em 0 0;
}

You'll notice that Mixx has the background for their list items set to this sprite:

The link within each list item also uses this same sprite, but changes the position of it in CSS (background: ... -19px...):

ol.tag-list li a {
    background:url("../images/layout/tag-bg.gif") no-repeat scroll 0 -19px transparent;
    color:#955C0F;
    display:block;
    height:1.4em;
    padding:0.15em 0 0.2em 1.2em;
    text-decoration:none;
}

This shifts the vertical position of the sprite (which is 38px high) up 19px, effectively showing the arrow-end.

That's essentially all there is to it.