웹 페이지 제작: div+css를 사용하여 테이블 대각선 시뮬레이션

저자：Eve Cole 업데이트 시간：2009-06-12 17:24:05

문서를 삽입할 때 표 대각선을 사용해야 할 때가 있습니다. 일반적인 방법은 그림을 사용하여 대각선을 그리는 것인데, HTML+CSS를 사용하여 이를 달성할 수 있습니까? 대답은 '예'입니다. 테이블의 대각선을 시뮬레이션해 보겠습니다.

경계선을 사용하여 대각선을 시뮬레이션합니다. DIV의 경계선이 충분히 넓게 설정되고 서로 다른 색상이 정의되면 인접한 두 경계선의 교차점이 대각선이 된다는 것을 알고 있습니다. 이 원리를 알면 border-left와 border-top을 사용하여 슬래시 효과를 시뮬레이션할 수 있습니다.

먼저 구조를 만들어 보겠습니다.

카테고리
이름

을 대각선 컨테이너로 사용하고, 슬래시 스타일을 설정했습니다.
.밖으로{
border-top:40px #D6D3D6 solid;/*상단 테두리의 너비는 테이블의 첫 번째 행 높이와 같습니다*/
width:0px;/*컨테이너 너비를 0으로 설정*/
height:0px;/*컨테이너 높이를 0으로 설정*/
border-left:80px #BDBABD solid;/*왼쪽 테두리의 너비는 테이블의 첫 번째 행에 있는 첫 번째 셀의 너비와 같습니다*/
position:relative;/*내부의 두 하위 컨테이너를 절대 위치로 만듭니다*/
}

및 태그는 두 개의 카테고리를 설정하고 각각 블록 구조로 설정하는 데 사용됩니다. display:block; 상위 컨테이너가 상대 위치를 설정했기 때문에 기본 글꼴 스타일을 지웁니다. 절대 위치로 지정하므로 지정하려는 위치로 오프셋할 수 있습니다.

b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;}
em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}

이러한 대각선이 시뮬레이션됩니다. 원리를 알면 많은 흥미로운 일을 할 수 있습니다. 행운을 빕니다!

이 대각선 시뮬레이션 방법의 단점:

1. 너비와 높이를 알아야 합니다.
2. 너비와 높이의 길이가 너무 다를 수 없습니다.
효과

를 보려면 너비를 높이보다 몇 배 더 길게 만들어 볼 수 있습니다.

또한 대각선의 색상은 설정할 수 없습니다.

또 다른 참고 사항: 위 코드는 ie6 및 ff3만 테스트했으며 다른 브라우저는 테스트되지 않았습니다.