[CSS] 말풍선 만들기 (transform: rotate())

일반적인 div영역은 width,와 height설정을 통해 사각형 형태로 만들어진다.
CSS로 말풍선 형태를 만드려면 어떻게 해야할까?

1. 말풍선의 사각틀이 되는 div(0)를 만든다.
2. div(0)안에 div(1)를 만들어 top, left를 조절하고 배경색을 입혀 말풍선 꼬리를 만든다.
3. div(0)안에 div(0)의 크기만큼의 div(2)를 만들고 배경색을 입힌다.
4. 말풍선 안의 내용은 div(2)안에 작성한다.

위 흐름으로 만들면 아래와 같이 대강 말풍선형태로 만들어진다.

위 상태에서 div(1)에 transform을 설정하여 마름모 형태로 만들어준다.

transform: rotateY(75deg) rotateZ(45deg);

rotateZ(45deg)는 사각형의 div(1)를 마름모형태로 돌려주는 역할을
rotateY(75deg)는 div(1)의 폭을 조절해준다.

div(1) 윗부분은 div(2)에 가려져서 말풍선 꼬리처럼 만들어졌다.