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.