对角线到角divs

Question

我正在尝试设计一个如下的网页。我更像是后端程序员，但想了解更多有关设计的信息，以便能够建立有吸引力的网站。我希望在拐角处有7个对角线（每种彩虹的颜色），就像我在下面一样。现在的文字仅表示它将是什么背景颜色。这些Divs将是加载页面数据的链接。我希望每个文本都具有对角线，我想我可以通过文本旋转来做到这一点。

在此问题上的任何帮助都将不胜感激，如果你们知道一些很棒的资源来学习如何在HTML，CSS，jQuery中构建有吸引力的网页，那将是很棒的。我得到语法，我只是不知道如何拿一块空白的画布并使其变得美丽。谢谢。

Answer 1

欢迎使用CSS3，这只是概念证明。不要指望IE8支持这一点！ 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;
}

编辑：这是一种清洁解决方案。我没有转换每个条，而是转换容器。