CSSだけで吹き出しを生成

HTMLとCSSだけで吹き出しをデザインする方法。

HTML側

<div class="sample">吹き出し</div>

CSS側
三角の位置はbeforeの一部を変更することで移動できる。

.sample{
  position: relative;
  padding: 20px;
}

/* 右 */
.sample::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #fff3ad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

/* 下 */
.sample::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #fff3ad;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

/* 左に */
.sample::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #fff3ad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

縁取りの吹き出しを作る場合には、:afterに同じ大きさの三角を書き、下向きの三角であれば少し上方向にずらせば作成可能。