CSS Diagonal Lines with filled space

Question

I'm building a website and I would like to have a bar of navigation links that is a solid color and then off to the far right I would like to have a diagonal line to come up a little bit over the bar of links and then have a limited height(level off) and have a search box in the raised area above the navigation links.

How would I go about 1 creating a diagonal line in css and then is it possible to fill the space with a solid color under one side of the said diagonal line?

Answer 1

Diagonal line with a solid color under the line...

html

<div class="uguu"></div>

css

.uguu {
    line-height:0;
    width:0;
    border-top:20px solid transparent;
    border-right:100px solid green;
}

fiddle: http://jsfiddle.net/83Wyy/

Answer 2

How would I go about 1 creating a diagonal line in css and then is it possible to fill the space with a solid color under one side of the said diagonal line?

Simple solution : Does not exist.

Complex solution : With lots of CSS, absolute positionning, not caring about IE (use of -moz-transform: rotate(45deg)), you can draw silly stuff.

See what some people can end up doing...

Personnaly, I'd go with @a solutions : use a background image.

If you really want to "draw", go with SGV, see this article for an example, using the dojo js framework.