Skip to content

Instantly share code, notes, and snippets.

@yamoo9

yamoo9/triangle.html

Created July 14, 2014 07:09
Show Gist options
  • Save yamoo9/545dcf8ab8457f06945b to your computer and use it in GitHub Desktop.
Save yamoo9/545dcf8ab8457f06945b to your computer and use it in GitHub Desktop.
Download ZIP
CSS border를 이용한 삼각형 그리기
Raw
triangle.html
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<title>삼각형 만들기</title>
<style>
.triangle-top {
width: 0px;
height: 0px;
border-top: 50px solid red;
border-right: 150px solid transparent;
border-left: 50px solid transparent;
}
.triangle-bottom {
width: 0px;
height: 0px;
border-bottom: 50px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
.triangle-right {
width: 0px;
height: 0px;
border-right: 50px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
.triangle-left {
width: 0px;
height: 0px;
border-left: 50px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
</style>
</head>
<body>
<div class="triangle-top"></div>
<div class="triangle-right"></div>
<div class="triangle-bottom"></div>
<div class="triangle-left"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment