Diagonale Ecke zu Eckdivs

Question

Ich versuche, eine Webseite wie die folgende zu entwerfen. Ich bin eher ein Back -End -Programmierer, wollte aber mehr über Design erfahren, um attraktive Websites aufzubauen. Ich möchte 7 diagonale Divs (für jede Regenbogenfarbe) in der Ecke haben, die wie ich unten aussehen. Der Text repräsentiert derzeit nur, welche Hintergrundfarbe er sein wird. Diese Divs wären Links zum Laden von Seitendaten. Ich möchte, dass der Text in jedem auch diagonal ist, und ich denke, ich kann das mit Textrotation tun.

Jede Hilfe in dieser Angelegenheit wäre sehr geschätzt, und wenn ihr einige großartige Ressourcen kennt, um zu lernen, wie man attraktive Webseiten in HTML, CSS, JQuery erstellt, wäre das großartig. Ich bekomme die Syntax Ich weiß einfach nicht, wie man eine leere Leinwand nimmt und sie noch schön macht. Vielen Dank.

Answer 1

Willkommen bei CSS3, dies ist nur ein Beweis für das Konzept. Erwarten Sie nicht, dass IE8 dies unterstützt! 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;
}

Bearbeiten: Dies ist eine Weg für sauberere Lösung. Anstatt jeden Balken zu transformieren, transformiere ich den Behälter.