Corner diagonal para canto divs

Question

Estou tentando projetar uma página da web como a seguinte. Sou mais um programador de back -end, mas queria aprender mais sobre o design para poder construir sites atraentes. Estou procurando ter 7 divs diagonais (para cada cor do arco -íris) no canto que parece que eu tenho abaixo. O texto agora representa que cor de fundo será. Esses divs seriam links para carregar dados da página. Eu gostaria que o texto dentro de cada um fosse diagonal e acho que posso fazer isso com a rotação do texto.

Qualquer ajuda nesse assunto seria muito apreciada e também se vocês souberem de ótimos recursos para aprender a criar páginas da Web atraentes em HTML, CSS, jQuery, isso seria ótimo. Recebo a sintaxe que simplesmente não sei como pegar uma tela em branco e torná -la bonita ainda. Obrigado.

Answer 1

Bem -vindo ao CSS3, isso é apenas uma prova de conceito. Não espere que o IE8 apoie isso! 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: Esta é uma solução mais limpa. Em vez de transformar cada barra, transformo o recipiente.