Geek Answers Handbook

CSS diagonal lines with filled space

I am creating a website and I would like to have a navigation bar that is solid color and then in the far right corner. I would like to have a diagonal line to go a little along the panel and then have a limited height (level off) and have a search box in the elevated area above the navigation links.

How do I go 1 by creating a diagonal line in css, and then is it possible to fill the space with solid color under one side of the specified diagonal line?

+4
source share
3 answers

Solid color diagonal line below the line ...

HTML

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

CSS

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

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

+11
source

How can I do 1 by creating a diagonal line in css and then you can fill the gap with solid color under one side of the specified diagonal line

Simple solution: does not exist.

Complete solution: with lots of CSS, absolute positioning, not caring about IE (using -moz-transform: rotate(45deg) ), you can use stupid things ,

See what some people can do ...

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

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

+1
source

To have a diagonal line in the background, you need to create a background image.

You can use this site to create a striped diagonal background: http://www.stripegenerator.com/

For what you do, I would recommend having 2 separate striped backgrounds.

0
source

More articles:


All Articles