CSSで吹き出しを作る方法

完成イメージ

こんな感じ。

最初は普通にbootstrapの吹き出しっぽいやつ使ってたんですけど、一部不便な点があったので結局自作することになったのでメモがてらシェア。

htmlのソース

<span class="fukidashi">未判定が<span class="txtRed">1</span>件あります</span>

cssのソース

/** fukidashi */
.fukidashi {
    width: 200px;
    height: 100px;
    background-color: #fff;
    border: 1px solid #bbb;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    margin: 20px auto;
    padding: 10px;
    position: relative;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    top: 10px;
    left: 10px;
}
/* 吹き出し三角部分 */
.fukidashi:before, .fukidashi:after {
    width: 0;
    height: 0;
    content: "";
    position: absolute;
    /* 吹き出し三角形を左側につける場合 */
    left: 0px;
}
/* 吹き出し三角のボーダー部分 */
.fukidashi:before {
    /* 下で定義している吹き出し三角の内側よりborderにに使いたいピクセル分大きくする必要がある。 */
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #bbb;
    border-left: 0px solid transparent;
    /* パーセント指定することで、吹き出しの高さを変更可能 */
    top: 40%;
    /* 三角形の大きさ分、ネガティブマージンを取る */
    margin-left: -8px;
    margin-top: -8px;
}
/* 吹き出し三角の内側 */
.fukidashi:after {
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid #fff;
    border-left: 0px solid transparent;
    top: 40%;
    margin-left: -7px;
    margin-top: -7px;
}

参考
[CSS] 画像を用いずにCSSとHTMLで吹き出しを作成する - YoheiM .NET