css 말풍선 그리기

말풍선 그리기

이미지를 사용하여 말풍선을 적용할 수 있지만 말풍선의 데이터에 따라 디자인이 깨지지 않으면서 반영이 되어야 하기에 css를 통해 말풍선을 그리는 게 효과적이다.

• 보더 컬러를 수정하여 말풍선 색상을 변경할 수 있다.
• 보더 값을 적절하게 변경하면 여러모양의 말풍선 꼭지점을 만들 수 있다.
• position 속성의 top left를 사용하여 말풍선의 꼭지점을 원하는 위치로 옮길 수 있다.

말풍선

.speech-bubble {
    position:relative;
    width:200px;
    padding:20px;
    background-color:#666;
    border-radius:4px;
    color:#fff;
}

.speech-bubble.left:after {
    content:'';
    position:absolute;
    top:50%;
    left:-16px;
    border-right:16px solid #666;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    transform:translateY(-50%);
}

.speech-bubble.right:after {
    content:'';
    position:absolute;
    top:50%;
    right:-16px;
    border-left:16px solid #666;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    transform:translateY(-50%);
}

.speech-bubble.top:after {
    content:'';
    position:absolute;
    top:-8px;
    left:50%;
    border-bottom:8px solid #666;
    border-left:16px solid transparent;
    border-right:16px solid transparent;
    transform:translateX(-50%);
}

.speech-bubble.bottom:after {
    content:'';
    position:absolute;
    left:30px;
    bottom:-8px;
    border-left:16px solid transparent;
    border-right:16px solid transparent;
    border-top:8px solid #666;
}

결과물

왼쪽 말풍선

오른쪽 말풍선

위 말풍선

아래 말풍선