How to create a div with a diagonal (or angled) top line

Question

I\'m a newbie on CSS3 and all I know is self-learned, reading you guys or any other tutorials so after hours of researching and trial-error, I could really use your help :(.

Answer 1

You could try achieving this with a css gradient. I do something similar on my website's splashpage :

http://agency89ninety.com

The angled background on the above site is purely CSS3 gradients (with fallbacks of course)

This is done by creating a gradient, starting at 0% with a color of GREY, ending at 50% with a color of GREY as well, then starting another gradient at 50% with a color of DARKGREY and ending at 100% with a color of DARKGREY also.

Basically you are tricking the system. It's technically a gradient, but looks like two solid colors that meet in the middle and are angled.

Take a look at this site to learn more about the properties of a css gradient:

http://www.css3files.com/gradient/