Divs de esquina diagonal a esquina

Question

Estoy tratando de diseñar una página web como la siguiente. Soy más un programador de back -end, pero he querido aprender más sobre el diseño para poder construir sitios atractivos. Estoy buscando tener 7 divs diagonales (para cada color del arco iris) en la esquina que parecen tener a continuación. El texto en este momento solo representa el color de fondo que será. Estos divs serían enlaces a cargar datos de página. Me gustaría que el texto dentro de cada uno sea diagonal también y creo que puedo hacerlo con rotación de texto.

Cualquier ayuda en este asunto sería muy apreciada y también si ustedes conocen algunos recursos excelentes para aprender a construir páginas web atractivas en HTML, CSS, jQuery que sería genial. Obtengo la sintaxis, simplemente no sé cómo tomar un lienzo en blanco y hacerlo hermoso todavía. Gracias.

Answer 1

Bienvenido a CSS3, esto es solo una prueba de concepto. ¡No esperes que IE8 apoye esto! 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;
}

Editar: esta es una solución más limpia. En lugar de transformar cada barra, transformo el contenedor.