css

CSS 삼각형(triangle) 그리기

핑계/ editor

  • 3 comments
  • 11,225 views
  • 2017년 9월 1일

CSS로 삼각형을 그려보아요 ~

1. CSS로 삼각형 그리는 방법


 

① border속성을 사용해서 사각형을 그려줍니다.

 

Markup

CSS

.triangle {
    width: 200px;
    height: 200px;
    border: 10px solid hotpink;
}

HTML5AROUND on html5around.com

 

② border 네모서리를 각기 다른색으로 설정해 줍니다.

 

.triangle {
    width: 200px;
    height: 200px;
    border-top: 10px solid hotpink;
    border-right: 10px solid yellowgreen;
    border-bottom: 10px solid darkorange;
    border-left: 10px solid deepskyblue;
}

HTML5AROUND on html5around.com

 

③ width, height 값에 0을 써주고, border두께를 더 두껍게 해서 도형내부의 흰 부분을 완전히 없애줍니다.

 

– border와 border가 만나는 부분이 45도가 되면서 높이가 110px인 삼각형 4개가 모여있는 모양이 되었습니다.
    width와 height값을 0으로 해주면 border color가 사각형 내부를 채웁니다.

.triangle {
    width: 0;
    height: 0;
    border-top: 110px solid hotpink;
    border-right: 110px solid yellowgreen;
    border-bottom: 110px solid darkorange;
    border-left: 110px solid deepskyblue;
}

HTML5AROUND on html5around.com

 

④ border 한 모서리의 color값을 transparent로 바꿔줍니다.

 

– 아래처럼 삼각형 1개가 사라진 것을 볼 수 있습니다.

.triangle {
    width: 0;
    height: 0;
    border-top: 110px solid transparent;
    border-right: 110px solid yellowgreen;
    border-bottom: 110px solid darkorange;
    border-left: 110px solid deepskyblue;
}

HTML5AROUND on html5around.com

 

⑤ 위처럼 나머지 2개의 border color값을 transparent로 바꿔줍니다.

 

– 그러면 border 3개가 모두 사라지고 삼각형 1개만 남습니다.
    하지만 border-top에 110px라고 두께값이 써있기 때문에 윗부분에 빈공간이 존재하게 됩니다.

.triangle {
    width: 0;
    height: 0;
    border-top: 110px solid transparent;
    border-right: 110px solid transparent;
    border-bottom: 110px solid darkorange;
    border-left: 110px solid transparent;
}

HTML5AROUND on html5around.com

 

– border-top값을 지워주면 윗부분 빈공간이 사라지게 됩니다. 삼각형 완성입니다.
    자기 취향대로 border수치를 조정해서 더 이쁜 삼각형을 만들어 보시기 바랍니다.

.triangle {
    width: 0;
    height: 0;
    border-right: 110px solid transparent;
    border-bottom: 110px solid darkorange;
    border-left: 110px solid transparent;
}

HTML5AROUND on html5around.com

 

 

2. 삼각형 그리기


 

.triangle_up {
    width: 0;
    height: 0;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    border-bottom: 200px solid hotpink;
}

.triangle_down {
    width: 0;
    height: 0;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    border-top: 200px solid darkorange;
}

HTML5AROUND on html5around.com

 

.triangle_left {
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-right: 200px solid deepskyblue;
}

.triangle_right {
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 200px solid yellowgreen;
}

HTML5AROUND on html5around.com

 

 

3. 직각삼각형 그리기


 

.triangle_top_left {
    width: 0;
    height: 0;
    border-bottom: 200px solid transparent;
    border-left: 200px solid hotpink;
}

.triangle_bottom_right {
    width: 0;
    height: 0;
    border-top: 200px solid transparent;
    border-right: 200px solid darkorange;
}

.triangle_bottom_left {
  width: 0;
  height: 0;
  border-top: 200px solid transparent;
  border-left: 200px solid yellowgreen;
}

.triangle_top_right {
  width: 0;
  height: 0;
  border-bottom: 200px solid transparent;
  border-right: 200px solid deepskyblue;
}

HTML5AROUND on html5around.com

핑계

댓글 먹고 살아요~

3
Leave a Reply

avatar
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
komolipgirlchoco Recent comment authors
newest oldest most voted
choco
Guest
choco

쉬운설명 감사합니다~

lipgirl
Guest
lipgirl

ㄳㄳ

komo
Guest
komo

어렵지만 따라해 볼게요!!!!