목록CSS 말풍선 (1)

영이로운 개발 생활 ⌯･˕･⌯ಣ

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

말풍선 만들기!넘버 카운팅을 위해 말풍선을 만들려고 한다.   에 숫자를 써주고배경색을 넣어 동그랗게 만들어준다  그럼 이런 모양이 나온다. 말풍선의 모양 처럼 꼬리를 넣어주려고 한다.   ::after 가상 선택자를 사용해서 넣어준다.4면 에서 한쪽을 제외한 나머지 부분은 투명으로보이게 하여 없애준다. transform: rotate 를 사용해 기울여준다. 동그라미 위로 작은 삼각형이 올라와z-index 로 아래로 내려준다.(여기에만 주면 아예 내려가서 .num_count 에z-index: 1을 주니 말풍선 뒤로 잘 보인다.)   결과적으로 이런 말풍선 모양이 나타난다 :)
영이로운 개발 생활 ꙳꒰•◡̎•꒱꙳ 2025. 1. 7. 11:03
이전 Prev 1 Next 다음