코너 디스의 대각선 코너

StackOverflow https://stackoverflow.com/questions/20353744

  •  25-08-2022
  •  | 
  •  

문제

다음과 같은 웹 페이지를 디자인하려고합니다. 나는 백엔드 프로그래머가 많지만 매력적인 사이트를 만들 수있는 디자인에 대해 더 많이 배우고 싶었습니다. 나는 아래에있는 것처럼 보이는 모퉁이에 7 개의 대각선 divs (무지개의 각 색상)를 찾고 있습니다. 텍스트는 지금 어떤 배경색을 나타냅니다. 이 div는로드 페이지 데이터에 대한 링크입니다. 나는 각각 내부의 텍스트가 대각선이되기를 원하며 텍스트 회전으로 그렇게 할 수 있다고 생각합니다.

이 문제에 대한 도움은 크게 감사하고 HTML, CSS, jQuery에서 매력적인 웹 페이지를 구축하는 방법을 배우는 훌륭한 리소스를 알고 있다면 훌륭한 자료를 알고 있다면 훌륭한 자료가 있습니다. 나는 구문을 얻습니다. 나는 빈 캔버스를 가져 가서 아직 아름답게 만드는 방법을 모릅니다. 감사.

enter image description here

도움이 되었습니까?

해결책

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;
}

편집 : 이것은 더 깨끗한 솔루션입니다. 각 막대를 변환하는 대신 컨테이너를 변형시킵니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top