CSS 말풍선 그리기 (기본편)

의외로 말풍선을 필요로 하는 분들이 꽤 되셔서 간단하게 복붙해서 사용하실 수 있도록 기본편을 준비했습니다. 비슷한 종류의 네가지 말풍선을 소개합니다.
※ 편의상 모든 CSS에는 벤더 프리픽스를 기입하지 않았습니다.
※ 각 수치는 각자의 상황에 따라 맞추시길 바랍니다.

기본이 되는 HTML소스

<div class="balloon"> </div>

HTML소스는 무척 간단합니다.

사각 테두리의 일반적인 말풍선

css

.balloon {
    display: inline-block;
    position: relative;
    background: #ccc;
    height: 50px;
    width: 120px;
    margin: 0 auto 10px;
}
.balloon:after {
    content: '';
    position: absolute;
    border-top: 10px solid #ccc;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    bottom: -9px;
    left: 5px;
}
    

사각 테두리의 일반적인 말풍선(테두리)

css

.balloon {
    display: inline-block;
    position: relative;
    background: #ccc;
    height: 50px;
    width: 120px;
    margin: 0 auto 10px;
    border: 1px solid #999;
}
.balloon:after {
    content: '';
    position: absolute;
    border-top: 10px solid #ccc;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    bottom: -9px;
    left: 5px;
}
.balloon:before {
    content: '';
    position: absolute;
    border-top: 10px solid #999;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    bottom: -11px;
    left: 5px;
}
    

만화적인 말풍선

css

.balloon {
    display: inline-block;
    position: relative;
    background: #ccc;
    height: 70px;
    width: 120px;
    margin: 0 auto 10px;
    border-radius: 50%;
}
.balloon:before {
    content: '';
    position: absolute;
    background: #ccc;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    bottom: -20px;
    left: 70px;
}
.balloon:after {
    content: '';
    position: absolute;
    background: #ccc;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    bottom: -30px;
    left: 90px;
}
    

테두리가 곡선으로 된 말풍선

css

.balloon {
    display: inline-block;
    position: relative;
    background: #ccc;
    height: 70px;
    width: 120px;
    margin: 0 auto 10px;
    border-radius: 10px;
}
.balloon:after {
    content: '';
    position: absolute;
    height: 50px;
    width: 50px;
    border-radius: 25px;
    z-index: -1;
    background: #fff;
    bottom: -20px;
    left: 50px;
}
.balloon:before {
    content: '';
    position: absolute;
    height: 50px;
    width: 50px;
    border-radius: 25px;
    z-index: -1;
    background: #ccc;
    bottom: -15px;
    left: 35px;
}