jquery - 对 Angular 线 Angular 到 Angular div

Question

我正在尝试设计如下网页。我更像是一名后端程序员，但想了解更多关于设计的知识，以便能够构建有吸引力的网站。我希望在 Angular 落里有 7 个对 Angular 线 div(对应彩虹的每种颜色)，如下图所示。现在的文本只代表它将是什么背景颜色。这些 div 将是加载页面数据的链接。我希望每个内部的文本也是对 Angular 线的，我想我可以通过文本旋转来做到这一点。

在这件事上的任何帮助将不胜感激，如果你们知道一些很好的资源来学习如何在 html、css、jquery 中构建有吸引力的网页，那就太好了。我得到了我只是不知道如何使用空白 Canvas 并使其美观的语法。谢谢。

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;
}

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