CSSによる吹き出し

今すぐ使えるコード

.arrow_box {
    position: relative;
    background: #FFF;
    border: 2px solid #CCC;
    padding: 3px;
    border-radius: 5px;
    margin-top: 5px;
}
.arrow_box:after, .arrow_box:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_box:after {
    border-bottom-color: #FFF;
    border-width: 8px;
    left: 15%;
    margin-left: -8px;
}
.arrow_box:before {
    border-bottom-color: #CCC;
    border-width: 11px;
    left: 15%;
    margin-left: -11px;
}

<div class="arrow_box">メッセージ</div>

三角形

まずborderで三角を作ることで吹き出しの先端を作ります。
borderは上下左右の線分でできていますが、幅が同じなら頂点から45度領域

線の幅を変更すると自由に角度を変更することができます。

.border-triangle-four{
  border: solid transparent;
  border-width: 11px;
  border-bottom-color: #CCC;
  border-left-color: #F00;
  border-top-color: #0F0;
  border-right-color: #00F;
  height: 0;
  width: 0;
}

<div class="border-triangle-four"></div>

三角の線

大きさの異なる三角を重ねれば線のように見えます。

.foo{
    position: relative;
}
.border-triangle{
    border: solid transparent;
    border-width: 11px;
    border-bottom-color: #F00;
    height: 0;
    width: 0;
    position: absolute;
    top: 0px;
}
.border-triangle-overlay{
    border: solid transparent;
    border-width: 8px;
    border-bottom-color: #FF0;
    height: 0;
    width: 0;
    position: absolute;
    top: 6px;
    margin-left: 3px;
}

<div class="foo">
  <div class="border-triangle"></div>
  <div class="border-triangle-overlay"></div>
</div>