Diagonal corner to corner divs

Question

I'm trying to design a web page like the following. I am more of a back end programmer but have wanted to learn more about design to be able to build attractive sites. I am looking to have 7 diagonal divs(for each color of rainbow) in the corner that look like I have below. The text right now just represents what background color it will be. These divs would be links to load page data. I would like the text inside each to be diagonal as well and I think I can do that with text rotation.

Any Help in this matter would be greatly appreciated and also if you guys know of some great resources to learn how to build attractive web pages in html,css,jquery that would be great. I get the syntax I just don't know how to take a blank canvas and make it beautiful yet. Thanks.

Answer 1

Welcome to CSS3, this is just a proof of concept. Don't expect IE8 to support this! http://jsfiddle.net/TreeTree/fyySn/7/

body {
    overflow:hidden;
    margin:0;
}

.rainbow {
    width:500px;
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform-origin:0% 0%;
    -ms-transform-origin:0% 0%;
    -moz-transform-origin:0% 0%;
    -webkit-transform-origin:0% 0%;
    position:absolute;
    top:200px;
    left:-150px;
}

.rainbow div {
    height:40px;
    text-align:center;

}

div a {
    line-height:40px;
    color:white;
    text-decoration:none;
    font-size:20px;
}

Edit: This is a way cleaner solution. Instead of transforming each bar, I transform the container.