ركن قطري إلى قفص الزاوية

Question

أحاول تصميم صفحة ويب مثل ما يلي. أنا أكثر من مبرمج في النهاية الخلفية ، لكنني أردت معرفة المزيد عن التصميم لأتمكن من بناء مواقع جذابة. إنني أتطلع إلى الحصول على 7 divs قطري (لكل لون من قوس قزح) في الزاوية التي تبدو وكأنني أدناه. يمثل النص الآن فقط لون الخلفية. ستكون هذه divs روابط لتحميل بيانات صفحة. أرغب في أن يكون النص داخل كل منهما قطريًا أيضًا وأعتقد أنه يمكنني فعل ذلك بتناوب النص.

ستكون أي مساعدة في هذا الأمر موضع تقدير كبير وأيضًا إذا عرفتم بعض الموارد الرائعة لمعرفة كيفية بناء صفحات ويب جذابة في 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;
}

تحرير: هذا هو حل أنظف. بدلاً من تحويل كل شريط ، أقوم بتحويل الحاوية.