CSS 吹き出しデザイン10選 + α

最終更新日 2021.12.27 - 公開日 2021.12.25

by Takumi Hirashima

CSS で作る吹き出しデザイン10選+αをご紹介します。
画像を使わずに、CSS だけで吹き出しを作りたいときに便利な方法です。

01.ノーマル吹き出し
02.ソリッド吹き出し
03.シャキッと吹き出し
04.角丸吹き出し
05.まる吹き出し
06.フワッと吹き出し
07.ラフ吹き出し
08.カクカク吹き出し
09.プイっと吹き出し
10.ドット吹き出し
11.額縁吹き出し
12.つぎはぎ吹き出し
13.ギザギザ吹き出し
14.シャドウ吹き出し
15.コミック吹き出し
16.アバンギャルド吹き出し

01.ノーマル吹き出し

ノーマル吹き出し

CSS で作る吹き出しでよくみる、シンプルデザインの吹き出しです。
本体の余白は以下のベースの CSS を使用します。

.balloon {

  position: relative;

  width: 280px;

  padding: 30px 20px;

  margin: 0 auto;

  font-size: 24px;

  font-weight: 700;

  text-align: center;

  background-color: #fff;

}

ベースのCSSは、続いて紹介する他の吹き出しでも使用する共通の指定です。
吹き出しの出っ張りは、擬似要素の　before を使用します。

.balloon::before {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%);

  width: 0;

  height: 0;

  border: 20px solid transparent;

  border-top-color: #fff;

}

擬似要素が正しく表示されない場合は、親要素に position: relative; が指定されているかを確認してください。

出っ張りの位置を変えたい場合は top や left の位置を変更してください。三角の形を変更する場合はCSS で三角形を作る方法を参照してください。
また、吹き出し単体の詳しい説明は CSS で吹き出しを作る方法を合わせてご覧ください。

02.ソリッド吹き出し

ソリッド吹き出し

角度を鋭角にした吹き出しデザイン。吹き出しの出現場所を鋭く指したいときに適した形です。

.balloon::before {

  content: "";

  position: absolute;

  top: 100%;

  left: 0;

  width: 0;

  height: 0;

  border: 12px solid transparent;

  border-top-color: #fff;

  border-left-color: #fff;

}

03.シャキッと吹き出し

シャキッと吹き出し

躍動感のある吹き出しデザイン。

.balloon::before {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%) skew(-30deg);

  width: 0;

  height: 0;

  border: 12px solid transparent;

  border-top-color: #fff;

  border-left-color: #fff;

}

04.角丸吹き出し

角丸吹き出し

角丸をあしらった柔らかなイメージを強調した吹き出しデザイン。

.balloon {

  border-radius: 15px;

}

.balloon::before {

  content: "";

  position: absolute;

  bottom: -15px;

  left: 50%;

  transform: translateX(-50%) rotate(-45deg);

  transform-origin:center center;

  width: 0;

  height: 0;

  border: 15px solid transparent;

  border-bottom-color: #fff;

  border-left-color: #fff;

  border-radius: 0 0 0 10px;

}

05.まる吹き出し

まる吹き出し

丸みを強調したポップで可愛い吹き出しデザイン。一言、二言、短い文を入れるのに適したデザインです。

.balloon {

  border-radius: 45% 45% / 50% 50%;

}

.balloon::before {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%) skew(-30deg);

  transform-origin:center center;

  width: 20px;

  height: 20px;

  border-radius: 0 0 100% 0;

  background-color: #fff;

}

06.フワッと吹き出し

フワッと吹き出し

少し勢いのある感じがありつつ、落ち着いた感じの吹き出しデザイン。

.balloon {

  border-radius: 50px;

}

.balloon::before {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%);

  width: 30px;

  height: 30px;

  border-right: 10px solid #fff;

  border-radius: 0 0 30px 0;

}

07.ラフ吹き出し

ラフ吹き出し

ぐにゃっと崩れた感じに遊び心のある、ラフな雰囲気の吹き出しデザインです。

.balloon {

  border-radius: 90% 5% 90% 5% / 10% 90% 10% 90%;

}

.balloon::before {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%) rotate(10deg);

  width: 0;

  height: 0;

  border: 20px solid transparent;

  border-top-color: #fff;

}

08.カクカク吹き出し

カクカク吹き出し

少しギクシャクした感じがポップな雰囲気のカクカク吹き出しデザイン。
擬似要素を2つ使うことで、文字が入る部分にも多角形の感じを追加しています。

.balloon {

  background-color: transparent;

  z-index: 0;

}

.balloon::before {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%);

  width: 8px;

  height: 0;

	border-top: 32px solid #fff;

	border-left: 8px solid transparent;

	border-right: 8px solid transparent;

  z-index: -1;

}

.balloon::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: #fff;

  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0% 50%);

  z-index: -2;

}

09.プイっと吹き出し

プイっと吹き出し

曲線を使うことで軽い動きを感じを演出。カワイイアクセントが際立つプイっと吹き出しデザイン。

.balloon::before {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%);

	width: 24px;

	height: 24px;

	border: solid 8px #fff;

	border-top: 0;

	border-left: 0;

	border-radius: 0 0 30px 0;

}

10.ドット吹き出し

ドット吹き出し

ドット絵風のどこかレトロ感が漂うドット吹き出しデザイン。

.balloon::before {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%);

	width: 10px;

	height: 10px;

  border-top: 10px solid #fff;

  border-right: 10px solid #fff;

}

11.額縁吹き出し

額縁吹き出し

立体感のあるクセのある吹き出しデザイン。
ボーダースタイルを使った特殊なデザインなので、背景色に合わせてボーダーカラーを調整してください。

.balloon {

  border-top: 8px ridge #8BC34A;

  border-right: 12px ridge #8BC34A;

  border-bottom: 8px ridge #8BC34A;

  border-left: 4px ridge #8BC34A;

}

.balloon::before {

  content: "";

  position: absolute;

  bottom: -23px;

  left: 50%;

  transform: translateX(-50%) rotate(-45deg);

  transform-origin:center center;

  width: 30px;

  height: 30px;

  background-color: #fff;

  border-bottom: 8px ridge #8BC34A;

  border-left: 4px ridge #8BC34A;

}

12.つぎはぎ吹き出し

つぎはぎ吹き出し

どこかアナログな感じがある吹き出しデザイン。
背景色に合わせてボーダー色をセットで調整してください。

.balloon {

  border: 2px dashed #CDDC39;

  border-radius: 20px;

}

.balloon::before {

  content: "";

  position: absolute;

  bottom: -17px;

  left: 50%;

  transform: translateX(-50%) rotate(-45deg);

  transform-origin:center center;

  width: 30px;

  height: 30px;

  background-color: #fff;

  border-bottom: 3px dashed #CDDC39;

  border-left: 3px dashed #CDDC39;

}

13.ギザギザ吹き出し

ギザギザ吹き出し

どこか手描き感あふれる吹き出しデザイン。
背景色に合わせてボーダー色をセットで調整してください。

.balloon {

  border: 3px dotted #FFEB3B;

  border-radius: 20px;

}

.balloon::before {

  content: "";

  position: absolute;

  bottom: -17px;

  left: 50%;

  transform: translateX(-50%) rotate(-45deg);

  transform-origin:center center;

  width: 30px;

  height: 30px;

  background-color: #fff;

  border-bottom: 3px dotted #FFEB3B;

  border-left: 3px dotted #FFEB3B;

}

14.シャドウ吹き出し

シャドウ吹き出し

フワッとした影を追加した吹き出しデザイン。
親要素に適用した filter の drop-shadow で、擬似要素を含めて影を追加することができます。

.balloon {

  filter:drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));

}

.balloon::before {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%);

  width: 0;

  height: 0;

  border: 20px solid transparent;

  border-top-color: #fff;

}

15.コミック吹き出し

コミック吹き出し

影を巧みに使ったポップな吹き出しデザイン。

.balloon {

  filter:drop-shadow(5px 5px 0 #000);

}

.balloon::before {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%);

  width: 0;

  height: 0;

  border: 12px solid transparent;

  border-top-color: #fff;

  border-left-color: #fff;

}

16.アバンギャルド吹き出し

アバンギャルド
吹き出し

アンバランスな影を複数追加して、アンバランスな雰囲気を出した吹き出しデザイン。

.balloon {

  filter: drop-shadow(5px 8px 0 #000) drop-shadow(-5px -8px 0 #000);

}

.balloon::before {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%);

  width: 0;

  height: 0;

  border: 20px solid transparent;

  border-top-color: #fff;

}

まとめ

CSS で作る吹き出しデザイン10選をご紹介しました。
余白部分のCSSは、最初に紹介している 01.ノーマル吹き出しを参照してください。