会話形式

概要

人物が喋っている形にしたいときに活用

デモ

名前
その他情報

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

名前
その他情報

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

html/css

See the Pen 会話形式 by kzwmk (@kzwmk) on CodePen.

カスタマイズ

吹き出しの色を変更する

左側の場合

.balloon-left .text-box {
    background: #任意の色を入れます;
}
.balloon-left .text-box:after {
    border-right-color: #任意の色を入れます;
}

右側の場合

.balloon-right .text-box {
    background: #任意の色を入れます;
}
.balloon-right .text-box:after {
    border-left-color: #任意の色を入れます;
}