Диагональный угол на угловой диви

Question

Я пытаюсь разработать веб -страницу, как следующее. Я больше программиста, но я хотел узнать больше о дизайне, чтобы иметь возможность создавать привлекательные сайты. Я хочу иметь 7 диагональных DIV (для каждого цвета радуги) в углу, которые выглядят так, как у меня есть ниже. Текст прямо сейчас представляет, какой цвет фона будет. Эти DOV будут ссылками на загрузку данных страницы. Я бы хотел, чтобы текст внутри каждого был диагональю, и я думаю, что могу сделать это с вращением текста.

Любая помощь в этом вопросе была бы очень оценена, а также если вы, ребята, знаете о отличных ресурсах, чтобы узнать, как создавать привлекательные веб -страницы в HTML, CSS, JQUERY, это было бы здорово. Я получаю синтаксис, я просто не знаю, как взять чистый холст, и сделать его красивым. Спасибо.

Answer 1

Добро пожаловать в CSS3, это просто доказательство концепции. Не ожидайте, что IE8 поддержит это! 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;
}

РЕДАКТИРОВАТЬ: Это способ более чистого решения. Вместо того, чтобы преобразовать каждую полосу, я преобразую контейнер.