Angolo diagonale agli angoli

Question

Sto cercando di progettare una pagina web come la seguente. Sono più un programmatore di back -end ma ho voluto saperne di più sul design per poter costruire siti attraenti. Sto cercando di avere 7 div diagonali (per ogni colore dell'arcobaleno) nell'angolo che sembrano sotto. Il testo in questo momento rappresenta solo quale colore di sfondo sarà. Questi Div sarebbero collegamenti ai dati della pagina. Vorrei che anche il testo all'interno di ciascuno fosse diagonale e penso di poterlo fare con la rotazione del testo.

Qualsiasi aiuto in questa materia sarebbe molto apprezzato e anche se voi ragazzi conoscete alcune grandi risorse per imparare a costruire pagine Web attraenti in HTML, CSS, jQuery che sarebbe fantastico. Ottengo la sintassi, non so come prendere una tela vuota e renderla ancora bella. Grazie.

Answer 1

Benvenuto in CSS3, questa è solo una prova del concetto. Non aspettarti che IE8 supporti questo! 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: questa è una soluzione più pulita. Invece di trasformare ogni barra, trasformo il contenitore.