对角线到角落div

Question

我正在尝试设计如下网页。我更像是一名后端程序员，但他想要了解更多有关设计的知识，以便能够建立有吸引力的网站。我希望在角落里有7个对角线div（对于每种颜色的彩虹），看起来像我在下面。现在的文字只代表它的背景颜色。这些div将是加载页面数据的链接。我希望每个内部的文本也是对角线的，我想我可以用文本旋转来做到这一点。

如果你们知道一些很好的资源来学习如何用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;
}

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