css 로 삼각형 그리기

css로 사각형은 따로 생각할 것도 없이 width, height 값만 입력하면 되지만

 

삼각형은 좀 다르게 해야한다.

 

http://uxuiz.cafe24.com/wp/archives/4619

 

이 글에 나온게 깔끔하게 잘 나온거 같고

 

핵심만 정리를 해보자면,

 

border-top, border-bottom, border-left, border-right 중에

 

삼각형 꼭지점이 될 부분을 none 처리하고

 

밑변이 될 부분은 온전하게 border-방향 : 두께 solid 색

 

높이가 될 두 부분은 transparent 처리한다는게 포인트다.

 

 

 

예를 들어서 빨간색 삼각형을 만든다고 하면

 

width: 0px;

height: 0px;

border-top: 4px solid none;

border-bottom: 4px solid #ff0000;

border-left: 3px solid transparent;

border-right: 3px solid transparent; 

 

요렇게 하면 된다.

 

 

 

 

여기서 이제 디테일한 모양을 생각해본다면

 

세로가 더 긴 뾰족한 삼각형을 만든다 치면

 

어딜 늘려야 할까?

 

높이가 될 border-left 랑 border-right 일거 같지만

 

left, right 를 늘리면 가로가 늘어난다.

 

언뜻 이해가 안 되지만, 위에 링크에 나온 설명을 읽어보면 이해가 될 거다.

 

css 로 삼각형을 만드는건,

 

border 의 속성을 이용해서 만드는건데

 

border 는 삼각형 형태의 네 가지 방향을 모아서 온전한 네모 형태를 갖는다.

 

이런 식으로.

 

 

 

 

 

 

 

그래서 border-top 을 none 하고

border-left랑 border-right 를 transparent 하면

이런 식으로 삼각형이 나오는 건데

 

 

 

 

 

left, right 픽셀을 늘리면

 

이렇게 left, right 가 늘어나서  결과적으로 가로 길이가 넓어지게 된 거다.

 

 

 

 

 

다시 돌아가서

 

높이가 긴 삼각형을 만들고 싶으면?

 

여기선 border-bottom 값을 키워서 만들면 되는거다.

 

어차피 border-top은 none 이니깐.

 

 

 

 

오늘은 여기까지.

 

 

 

 

이 내용이 도움이 되었다면

광고를 사정없이 클릭 혹은 터치를 해주세요.

광고 노출 자체로는 거의 수익이 나지 않는 소소한 블로그랍니다 ^^