[css] 말풍선 // 말풍선 꼬리 만들기

말풍선 만들기!

넘버 카운팅을 위해 말풍선을 만들려고 한다.

 

 

<span> 에 숫자를 써주고

배경색을 넣어 동그랗게 만들어준다

 

 

그럼 이런 모양이 나온다.

 

말풍선의 모양 처럼 꼬리를 넣어주려고 한다.

 

 

 

::after 가상 선택자를 사용해서 넣어준다.

4면 에서 한쪽을 제외한 나머지 부분은 투명으로

보이게 하여 없애준다.

 

transform: rotate 를 사용해 기울여준다.

 

동그라미 위로 작은 삼각형이 올라와

z-index 로 아래로 내려준다.

(여기에만 주면 아예 내려가서 .num_count 에

z-index: 1을 주니 말풍선 뒤로 잘 보인다.)

 

 

 

결과적으로 이런 말풍선 모양이 나타난다 :)