概要

主に複数の人が会話をしている時に活用できる形です。
吹き出しとアイコンの枠線が同じなので誰が会話しているのか分かりやすい形になっています。

デモ

吹き出しの中身吹き出しの中身吹き出しの中身吹き出しの中身吹き出しの中身
吹き出しの中身吹き出しの中身吹き出しの中身吹き出しの中身吹き出しの中身

html/css

See the Pen 会話形式(枠線) by hbm-design (@hbm-design) on CodePen.

カスタマイズ

枠線の色を変更する

左側の場合

.balloon-left figure img {
  border: 3px solid #任意の色を入れます;
}
.balloon-left .text-box {
  border: 2px solid #任意の色を入れます;
}
.balloon-left .text-box:after {
  border-right: 2px solid #任意の色を入れます;
  border-bottom: 2px solid #任意の色を入れます;
}

右側の場合

.balloon-right figure img {
  border: 3px solid #任意の色を入れます;
}
.balloon-right .text-box {
  border: 2px solid #任意の色を入れます;
}
.balloon-right .text-box:after {
  border-right: 2px solid #任意の色を入れます;
  border-bottom: 2px solid #任意の色を入れます;
}