[HTML/CSS] CSS 말풍선 만들기 | border 말풍선 만드는 방법

오늘은 css를 통해 말풍선을 만들어 보려고한다.

먼저 css로 만들기 전에 말풍선 만드는 방법에 대해 이해를 해야한다.

 

border를 통해 화살표를 만들어줘야하는데

border의 top, bottom, left, right에 컬러를 따로 줄 경우 위의 그림처럼

각 부분이 삼각형으로 나타난다.

보통 border값을 줄 때에는 border: 10px solid red; 이렇게 주는데

여기서 10px가 위의 그림의 width값이라고 생각하면된다.

 

그리고 width값은 위의 그림처럼 되기 위해서는 left의 width값만 고려할 대상이 아니라

top과 bottom의 width값도 고려해야 할 대상이다.

 

삼각형의 형태도 정삼각형, 이등변삼각형 등 형태가 다른 만큼 width 값이 달라질 수 있다.

위의 이미지에서 높이가 길어지고싶을 경우에는 left값이 길어지며,

화살표의 모양이 정삼각형, 이등변삼각형이 되기 위해서는 top과 bottom의 값을 동일하게 값을 변경하면된다.

 

그리고 한쪽으로 치우진 모습으로 표현하고싶다면 top과 bottom의 값을 다르게 주면된다.

 

 

See the Pen Untitled by HAJIN LEE (@rajin444) on CodePen.