CSS 만으로 대각선 만들기

CSS만으로 사선을 만드는 방법을 알아보겠습니다.
원글은 여기 입니다. 영어로 되어 있으니 제가 쉽게 설명을 해드릴게요.
이러한 형식은 티스토리에서 서식으로 만들어서 사용해도 좋을것 같습니다.

일단 html 마크업은 아래와 같습니다. 스타일이 포함되지 않은 html입니다.

<!DOCTYPE html> 
<html lang="ko">
<head>
   <meta charset="utf-8">
   <title>Demo</title>
</head>
<body>
	<a href="#">박스 제목</a>
	<div>
		<h3> 안녕하세요.! </h3>
		<p>P블럭 입니다.</p>
	</div>
</body>
</html>

그다음 스타일을 지정합니다.

body {
	background: #e3e3e3;
	font-family: "나눔고딕",sans-serif;
	width: 400px;
	margin: 100px auto;
}
a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;

	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c;
}

여기까지 하고 한번 볼까요?
 


width:400px 을 주어서 길게 border 이 있지요.
a 컬러 색상을 흰색으로 주어서 박스제목이 흰색으로 나타납니다.
여기서 주의해서 볼것은 바로 border 입니다. 오른쪽과, 아래쪽으로 주었지만 맨 끝에는 사선형식으로 나오죠.
height:0 만 추가했습니다.

그 다음 박스제목에 높이를 설정해보겠습니다.
a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;

	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c;

	height: 0;
}

그럼 아래처럼 보입니다.

 
박스 제목부분이 아래로 내려왔죠. 
높이는 0으로 하고 글꼴의 라인 높이를 키워서 박스 제목이 border 부분으로 내려오도록 하겠습니다.
단순이 line-hegiht:50px 를 추가해서 border-bottom 안에 박스제목이 보이도록 합니다.
a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;

	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c; 

	height: 0;
	line-height: 50px;
}

그럼 이미지를 보시죠.

 
어떻습니까 박스제목이 제자리를 잡은것 같죠....
그럼 빨강색으로 했던 우측 라인 즉 border-right 를 투명하게 합니다.

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;

	border-right: 30px solid transparent;
	border-bottom: 30px solid #4c4c4c; 

	height: 0;
	line-height: 50px;
}

우측 보더를 투명하게 하니 이제 적당이 자리를 잡습니다.

 
이제 박스 제목에 있는 보더가 여기서는 배경처럼 보입니다.
이 보더가 너무기니 적당하게 줄여야 합니다.
여기서는 박스길이에 적당하게 맞추어야하니 display: block; 을 display: inline-block; 로 수정해줍니다.

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: inline-block;

	border-right: 30px solid transparent;
	border-bottom: 30px solid #4c4c4c; 

	height: 0;
	line-height: 50px;
}

박스 제목만큼 길이가 조정이 됐습니다. 
마찬가지로 제목이 길어지면 그 만큼 길어집니다.
 


다음은 안녕하세요가 있는 블럭에 대해서 스타일을 설정합니다.

div {  
     border: 1px solid #4c4c4c;  
     border-top: 3px solid #4c4c4c;  
     padding: 20px;  
}

자 이제 이미지를 보시죠.
 


뭔가 이상한점을 보셨나요??? 이걸 찾으셨다면 당신은 CSS 고수.....
넣지도 않은 마진이 있지요. 
박스 제목아래에 공간이 생겼지요.
이는 크롬에서 보여지는 화면입니다. 파이어폭스에서 볼까요?



역시나 파이어폭스에서는 정상적으로 보이나 크롬에서만 4px 정도의 공간이 생깁니다.
이를 바로 잡기위해 @media 를 이용합니다.
즉 아래의 코드를 추가합니다.

@media screen and (-webkit-animation) {
	a {
		margin-bottom: -4px;
	}
}

그럼 크롬에서도 정상적으로 보입니다. 물론 파이어폭스에서도 동일하게 보입니다.
위에 사용한 예제 파일입니다.

test.html

 
위의 이미지를 순서대로 보시면 이해가 잘 가실겁니다.

0123456


개    개