CSSだけで吹き出しを作る

cssで吹き出しを作成すれば、テキスト量がどんなに増えてもレイアウトが崩れにくいという、メリットがあります。

要素にくっつけて別の形を表現することで吹き出しの作成がが可能です。

その場合三角形を:beforeや:afterといった擬似要素として配置します。

/*基本の吹き出し*/
.fukidashi{
  position: relative;
  background: #FFF;
  padding: 2em;
}
.fukidashi:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #ccc transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}