Coin diagonal aux divans d'angle

Question

J'essaie de concevoir une page Web comme celle suivante. Je suis plus un programmeur arrière mais j'ai voulu en savoir plus sur le design pour pouvoir construire des sites attrayants. Je cherche à avoir 7 divs diagonaux (pour chaque couleur de l'arc-en-ciel) dans le coin qui ressemble à ci-dessous. Le texte ne représente actuellement de quelle couleur d'arrière-plan il sera. Ces Divs seraient des liens vers le chargement des données de la page. J'aimerais aussi que le texte à l'intérieur soit diagonal et je pense que je peux le faire avec la rotation du texte.

Toute aide dans cette affaire serait grandement appréciée et si vous connaissez de bonnes ressources pour apprendre à créer des pages Web attrayantes en HTML, CSS, jQuery qui serait formidable. Je reçois la syntaxe, je ne sais pas comment prendre une toile vierge et la rendre belle encore. Merci.

Answer 1

Bienvenue sur CSS3, ce n'est qu'une preuve de concept. Ne vous attendez pas à ce que IE8 soutienne cela! http://jsfiddle.net/treetreee/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: Il s'agit d'une solution plus propre. Au lieu de transformer chaque barre, je transforme le conteneur.