CSSで吹き出しをつくろう。

つくってみました。

html

<p class="balloon">しゃっきりぽん！</p>

css

* {
    margin: 0; padding: 0;
    font: 15px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif; 
}

body {
    background: #f4e3f1;
}

.balloon {
    display: inline-block;
    position: relative;
    margin: 100px;
    padding: 20px;
    color: #fff;
    text-align: center;
    background: #af1c92;
    border-radius: 40px;
    -webkit-animation: flow 2s ease 0s infinite normal;
       -moz-animation: flow 2s ease 0s infinite normal;
        -ms-animation: flow 2s ease 0s infinite normal;
         -o-animation: flow 2s ease 0s infinite normal;
            animation: flow 2s ease 0s infinite normal;
}

.balloon:after {
    display: block;
    position: absolute;
    margin-left: -10px;
    bottom: -20px;
    left: 50%;
    width: 0;
    height: 0;
    border: solid transparent 10px;
    border-top: solid #af1c92 10px;
    content: "";
}

@-webkit-keyframes flow {
    0%   {
        bottom: 10px;
    }
    50%  {
        bottom: 30px;
    }
    100% {
        bottom: 10px;
    }
}

@-moz-keyframes flow {
    0%   {
        bottom: 10px;
    }
    50%  {
        bottom: 30px;
    }
    100% {
        bottom: 10px;
    }
}

@-ms-keyframes flow {
    0%   {
        bottom: 10px;
    }
    50%  {
        bottom: 30px;
    }
    100% {
        bottom: 10px;
    }
}

@-o-keyframes flow {
    0%   {
        bottom: 10px;
    }
    50%  {
        bottom: 30px;
    }
    100% {
        bottom: 10px;
    }
}

@keyframes flow {
    0%   {
        bottom: 10px;
    }
    50%  {
        bottom: 30px;
    }
    100% {
        bottom: 10px;
    }
}

ちょっとした解説

吹き出しの大きさをテキストの長さに合わせるためにはインライン要素にする必要が、
吹き出しにafter要素で▼をつけるためにはブロック要素にする必要があったため、
balloonクラスはインラインブロック要素にしてみました。時代はハイブリッドですね。（？）

あとは、border-radiusで角丸にしてCSSアニメーションでふわふわ感をアップさせてみた次第です。はい。