css로 삼각형 만들기

아래의 이미지와 같이 tooltip을 구현할시에 삼각형을 만들어 표시해주고 싶었습니다.

css로 삼각형을 만드는 법을 포스팅 하고자 합니다.

css로 구현한 삼각형

 

 

방법은 쉽습니다.

1. width와 height을 0으로 준다.

2. border-width는 원하는대로 설정, border-style은 solid

3. border-color를 통해 삼각형을 원하는 방향으로 표시해줍니다.

 

하나씩 살펴보겠습니다.

1. width와 height이 50이고 border가 설정되어있는 div하나를 나타내보겠습니다.

width: 50px;
height: 50px;
border-style: solid;
border-color: black;
border-width: 8px;
text-align: center;
justify-content: center;
line-height: 50px;

2. 각 위치의 border 색깔을 달리 줘보겠습니다.

border-color: black blue green yellow;

 

3. 이제 div의 width와 height을 0으로 설정해보겠습니다.

width: 0px
height: 0px

 

4. border-color를 원하는 방향을 제외한 부분을 transparent로 설정하면 원하는 대로 삼각형을 표시할 수 있습니다.

border-color: black transparent transparent transparent;

border-color: transparent blue transparent transparent;

border-color: transparent transparent green transparent;

border-color: transparent transparent transparent yellow;

border-color: green transparent transparent yellow;

 

 

전체 코드

    width: 0px;
    height: 0px;
    border-style: solid;
    border-color: black transparent transparent transparent;
    border-width: 8px;