need help in displaying wordpress menu in a creative way

I got a design of a wordpress website, and need t开发者_如何学编程o build the menu as the attached image. I thought of having repeated background of the black "/" and the categories/pages names with white background, but I think it won't look good. I thought of having a function that fills the black "/", but have no idea how to start. Any idea will be much appreciated. Thanks ! (please ignore the blue lines).

@shir; create a / image for background & you can use it like this

for example

ul{
    list-style:none;
    float:right;
}
ul li{
    background:url(tile.jpg) repeat-x;
    width:100px;
    font-family:verdana;
    font-size:14px;
    margin-bottom:5px;
    text-align:right;
}
ul li a{
    background:red;
    text-decoration:none;
    color:yellow;
}

check this http://jsfiddle.net/sandeep/Dfjvm/ example in which use a google image as a dummy. may that help you.

I think a tiled background would be the way to go, but you would actually need to use three images to make it look right.

So if you make this menu as a list, you could give each <li> the css text-align: right;background:url(slashes.jpg);

Then you need two images which contain a white triangle, which have the right shape to mask the start and finish of your pattern. Let's say these are each 10px wide.

You could give the <a> padding-left of 10px, and have the right-hand white triangle as a left-aligned, non-repeating background.

Then, inside each <li> you could could add a small div or other element, which is the full height of the li, with float left, and the background image would be the left-hand side element. This way you would only have complete diagonal lines showing and no broken ones. The alst diagonal line could have inconsistent width though. It might be possible to prevent this by using a monospace font, and letter-spacing in css, to guarantee how how much horizontal each letter takes up in your links. For example, you could make a formula for (1 letter = 2 slashes)