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;
}
편집 : 이것은 더 깨끗한 솔루션입니다. 각 막대를 변환하는 대신 컨테이너를 변형시킵니다.