[CSS] 삼각형 만들기

 

 

 

웹 브라우저에 표현하기 위한 언어인 HTML와 CSS은 Box Model 기반으로 구성되어 있습니다.

그렇기 때문에, HTML/CSS에서 네모난 박스를 구하는건 쉽고 자연스러운 일입니다.

width, height의 값을 설정하여 박스의 크기를 지정하고,

background에는 원하는 색을 넣으면 간단한 형태의 박스가 만들어 집니다.

.square {
    height: 100px;
    width: 100px;
    background: #6592CF;
}

 

 

그리고 원은 각 모서리의 굴곡(border-radius)의 정도를 조절하여 타원부터 정원의 형태까지 구현가능합니다.

.circle {
    height: 100px;
    width: 100px;
    background: #6592CF;
    border-radius: 50%;
}

 

그렇다면 HTML과 CSS의 Box Model에서 삼각형은 어떻게 구현할까요?

 

width와 height를 가지는 모델로는 구현이 어려워 보입니다.

그래서 border의 성질을 이용하여 우회적인 방법으로 삼각형을 구할 수 있는데요.

먼저 box와 border를 그려보면 이렇게 생겼는데요.

 

보이다싶이 border 간 경계선이 대각으로 그려져있는것을 볼수있는데요.

이 성질을 이용해서 box의 크기를 0으로 만들면 이런 결과가 나오겠죠?

 

여기서 파랑 보라  빨강 초록 삼각형중에서 원하는 삼각형만을 남겨두고 나머지는 투명하게 설정해주면 삼각형이 완성되게 됩니다.

 

아래는 지금까지 보여준 그림과 직각삼각형, 이등변삼각형, 정삼각형을 구현한 코드입니다.