HTML div 대각선 그리기

1 개요

CSS div 대각선 넣기

HTML div 대각선 넣기

2 소스 코드

<style>
.slash {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="100%" x2="100%" y2="0" stroke="#333333" /></svg>');
}
.backslash {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="gray" /></svg>');
}
div {
	display:inline-block;
	border:1px solid gray;
	padding: 5px;
} 
</style>

<div class="slash">안녕</div>
<div class="backslash">Hello<br>World</div>

3 같이 보기

• HTML table 대각선 넣기
• HTML div
• 대각선

4 참고

• http://www.sitepoint.com/css3-transform-background-image/
• http://stackoverflow.com/questions/5768998/how-to-flip-background-image-using-css