CSSだけで吹き出しをつくる!デザインサンプル26個

CSSだけで吹き出しをつくる!デザインサンプル26個

CSSだけでつくれる「吹き出し」のデザインサンプルを26個、用意しました!
どのサンプルもコピペで利用することができますので、デザインの参考にぜひ取り入れてみてください。

目次
  1. コピペでOK!CSSだけで吹き出しをつくる!
  2. 普通の吹き出し
  3. 枠線付きの吹き出し
  4. 角丸の吹き出し
  5. 三角アイコンを中心に表示
  6. 会話風の吹き出し
  7. 影付きの吹き出し
  8. マウスオーバーで表示
  9. まん丸吹き出し
  10. 心の声
  11. 曲がったアイコン
  12. グラデーション
  13. 簡単作成!吹き出しジェネレータのご紹介
  14. シンプルな吹き出しを作るならこれ!
  15. 様々な三角形を簡単作成!
  16. グラデーションジェネレータの鉄板!
  17. まとめ

コピペでOK!CSSだけで吹き出しをつくる!

HTMLとCSSだけで作れる吹き出し のサンプルをご紹介します! サンプルのコードをコピー&ペーストするだけで使える吹き出しを20個以上! シンプルなものから、枠線、丸、影付きなど様々なバージョンをご用意しました。

これから紹介する全ての吹き出しは レスポンシブに対応 しています!

普通の吹き出し

まず、一番シンプルな吹き出しのサンプルです。 balloonクラスのdivを吹き出し本体とし、balloonの before疑似要素 で三角のアイコンを表現します。

image

balloon.html

<div class="balloon">
  CSSだけで吹き出しをつくる
  <br>上にアイコン
</div>

balloon.css

/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 20px;
}

/* beforeで三角を表現 */
.balloon::before{
  content: '';
  position: absolute;
  left: 20px;
  top: -15px;
  display: block;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #fff3ad;
  border-left: 15px solid transparent;
}

上下左右にアイコンを並べる

beforeの位置と形を調整することで、上下左右好きな位置の吹き出しを作ることができます。

image

image

image

※ balloon.css のbeforeを書き換えます。

balloon.css

/* アイコンを右に表示 */
.balloon::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;
}

/* アイコンを下に表示 */
.balloon::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;
}

/* アイコンを左に表示 */
.balloon::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;
}

横幅を自動変更

また、 display: inline-block; を指定すると、 内包する要素に合わせて横幅が伸び縮みします 。 吹き出しを横幅いっぱいに伸ばしたくないときなどに利用できます。

image

balloon.html

<div class="balloon">
  CSSだけで吹き出しをつくる
  <br>文字数に合わせて横幅を自動で変更
</div>

balloon.css

/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
  display: inline-block;     /* 横幅を自動で変更 */
}

/* beforeで三角を表現 */
.balloon::before{
  content: '';
  position: absolute;
  left: 20px;
  top: -15px;
  display: block;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #fff3ad;
  border-left: 15px solid transparent;
}

枠線付きの吹き出し

続いて、枠線付きの吹き出しのサンプルです。 シンプルな吹き出しでは before疑似要素 のみで三角アイコンを表現しましたが、今回は枠線を表現するために after疑似要素 も使用します。

image

balloon2.html

<div class="balloon">
  CSSだけで吹き出しをつくる - 枠線
  <br>上にアイコン
</div>

balloon2.css

/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 20px;
  background-color: #ffadad;
  border: 2px solid #ca8888;
}

/* beforeで枠線の三角を表現 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  top: -15px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #ca8888;
  border-left: 15px solid transparent;
}

/* beforeで本体の三角を表現 */
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  top: -12px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #ffadad;
  border-left: 15px solid transparent;
}

枠線の吹き出しは、 本体のボーダー線の色で塗りつぶした三角背景色を塗りつぶした三角 で構成されています。 線の色で塗りつぶした三角と、背景色を塗りつぶした三角を少しずらして重ねることで、線を表現します。

枠線のしくみ

image

上下左右にアイコンを並べる

もちろん枠線付きの吹き出しも、上下左右の好きな位置に三角アイコンを配置できます。

image image image

※ balloon2.css のbeforeとafterを書き換えます。

balloon2.css

/* アイコンを右に表示 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #ca8888;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -12px;
  top: 20px;
  border-left: 15px solid #ffadad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}


/* アイコンを下に表示 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #ca8888;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -12px;
  border-top: 15px solid #ffadad;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

/* アイコンを左に表示 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #ca8888;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -12px;
  top: 20px;
  border-right: 15px solid #ffadad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

角丸の吹き出し

普通の吹き出しも枠線付きの吹き出しも、 border-radius プロパティを指定することで吹き出しに丸みがつきます。 こうすることで、普通の吹き出しよりもぐっと柔らかい表現にすることができます。

image

image

balloon3.html

<div class="balloon1">
  CSSだけで吹き出しをつくる
  <br>角丸もOK
</div>

<div class="balloon2">
  CSSだけで吹き出しをつくる - 枠線
  <br>角丸もOK
</div>

balloon3.css

/* 吹き出し本体 - 普通の吹き出し */
.balloon1{
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
  border-radius: 10px;         /* 角丸を指定 */
}
/* 三角アイコン - 普通の吹き出し */
.balloon1::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;
}


/* 吹き出し本体 - 枠線付きの吹き出し */
.balloon2{
  position: relative;
  padding: 20px;
  background-color: #ffadad;
  border: 2px solid #ca8888;
  border-radius: 10px;         /* 角丸を指定 */
}
/* 三角アイコン - 枠線付きの吹き出し */
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #ca8888;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.balloon2::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -12px;
  top: 20px;
  border-right: 15px solid #ffadad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

三角アイコンを中心に表示

三角アイコンの位置を 常に中心に配置する 事もできます。

image

image

balloon4.html

<div class="balloon1">
  CSSだけで吹き出しをつくる - 枠線
  <br>アイコンを左右の中心へ配置
</div>

<div class="balloon2">
  CSSだけで吹き出しをつくる - 枠線
  <br>アイコンを上下の中心へ配置
  <br>アイコンを上下の中心へ配置
</div>

balloon4.css

/* 吹き出し本体 - 左右の中心 */
.balloon1{
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
}
/* 三角アイコン - 左右の中心 */
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  bottom: -15px;
  margin: 0 auto;
  border-top: 15px solid #fff3ad;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}


/* 吹き出し本体 - 上下の中心 */
.balloon2{
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
}
/* 三角アイコン - 上下の中心 */
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 50%;
  margin-top: -15px;
  border-right: 15px solid #fff3ad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

会話風の吹き出し

吹き出しの横に画像を配置して、チャットの会話風の吹き出しを作ります。 吹き出しの左(もしくは右)に余白を設け、そこに 絶対配置 で画像を配置して喋っているように見せます。

image

image

※実際に使用する画像の大きさに合わせてや位置や余白を調整してください。サンプルでは縦横84pxの画像を使用しています。

balloon5.html

<div class="balloon1">
  <div class="icon"> <!-- ●ここに画像を挿入● --> </div>
  CSSだけで吹き出しをつくる - 会話風
  <br>左に画像
</div>


<div class="balloon2">
  <div class="icon"> <!-- ●ここに画像を挿入● --> </div>
  CSSだけで吹き出しをつくる - 会話風
  <br>右に画像
</div>

balloon5.css

/* 吹き出し本体 */
.balloon1{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #ffffff;
  background-color: #0888ff;
  margin-left: 110px;          /* 左に余白を設ける */
}
/* 画像 - 絶対配置で左上に配置 */
.balloon1 .icon{
  position: absolute;
  left: -110px;
  top: 0;
}
/* 三角アイコン */
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #0888ff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

/* 吹き出し本体 */
.balloon2{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #ffffff;
  background-color: #0888ff;
  margin-right: 110px;          /* 右に余白を設ける */
}
/* 画像 - 絶対配置で右上に配置 */
.balloon2 .icon{
  position: absolute;
  right: -110px;
  top: 0;
op: 0;
}
/* 三角アイコン */
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #0888ff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

影付きの吹き出し

くっきりした影

くっきりした影がついている吹き出しです。 見出しなどにも使えそうですね。

image

balloon6.html

<div class="balloon">
  CSSだけで吹き出しをつくる - 影付き
  <br>くっきりした影
</div>

balloon6.css

/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 20px;
  background-color: #bdffad;
  border-radius: 10px;
  box-shadow: 6px 6px 0px 0px #318c30;         /* 吹き出し本体の影 */
}
/* 三角アイコン */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 27px;
  bottom: -18px;
  border-top: 15px solid #318c30;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
/* 三角アイコンの影 */
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #bdffad;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

ほんわかした影

ほんわかした影がついている吹き出しです。 くっきりした影の吹き出しと違い三角アイコンに影はありませんが、さほど違和感はありません。

image

balloon6.html

<div class="balloon">
  CSSだけで吹き出しをつくる - 影付き
  <br>ほんわかした影
</div>

balloon6.css

/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 20px;
  background-color: #bdffad;
  box-shadow: 0px 0px 10px 0px #a7a7a7;         /* 吹き出し本体の影 */
}
/* 三角アイコン */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  top: -15px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #bdffad;
  border-left: 15px solid transparent;
}

マウスオーバーで表示

マウスオーバーすると、三角のアイコンがニョキッと出て来る吹き出しです。

image

balloon7.html

<div class="balloon">
  CSSだけで吹き出しをつくる - マウスオーバーで表示
  <br>上にアイコン
</div>

balloon7.css

/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 20px;
  background-color: #ecadff;
}
/* 三角アイコン */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  transition: all .2s ease;
  left: 20px;
  top: 0px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #ecadff;
  border-left: 15px solid transparent;
}
/* ホバー時に三角アイコンの位置を変える */
.balloon:hover::before{
  top: -15px;
}

まん丸吹き出し

丸の吹き出しアイコンです。ワンポイントに使えますね!

widtとheightに同じ値を指定 し、 border-radiusを50% にすることで正円にしています。 さらに line-heightheight と同じ値にすることで、テキストを上下の中心に配置しています。

image

サンプルでは三角アイコンを回転して斜めにしていますが、上下や左右に配置しても素敵なアイコンになりそうですね!

balloon8.html

<div class="balloon1">
  CHECK
</div>

<div class="balloon2">
  POINT
</div>

<div class="balloon3">
  LOOK
</div>

<div class="balloon4">
  GOOD
</div>

balloon8.css

/* CHECK */
.balloon1{
  position: relative;
  padding: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-size: 14px;
  background-color: #ff9800;
}
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 2px;
  bottom: 2px;
  border-right: 20px solid #ff9800;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(-45deg);
}


/* POINT */
.balloon2{
  position: relative;
  padding: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-size: 14px;
  background-color: #ff9800;
}
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 2px;
  bottom: 2px;
  border-left: 20px solid #ff9800;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(45deg);
}


/* LOOK */
.balloon3{
  position: relative;
  padding: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-size: 14px;
  background-color: #ff9800;
}
.balloon3::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 2px;
  top: 2px;
  border-right: 20px solid #ff9800;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(45deg);
}


/* GOOD */
.balloon4{
  position: relative;
  padding: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-size: 14px;
  background-color: #ff9800;
}
.balloon4::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 2px;
  top: 2px;
  border-left: 20px solid #ff9800;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(-45deg);
}

心の声

(´-`).。oO(心の中で思っていることなどを表現するときの吹き出しです)

image

balloon9.html

<div class="balloon">
  CSSだけで吹き出しをつくる - 心の中
  <br>心の中で思ってることなど
</div>

balloon9.css

/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 20px;
  background-color: #ade0ff;
  border-radius: 30px;
}
/* 大きい丸 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ade0ff;
  left: -35px;
  bottom: 15px;
  width: 30px;
  height: 30px;
}
/* 小さい丸 */
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ade0ff;
  left: -55px;
  bottom: 10px;
  width: 15px;
  height: 15px;
}

曲がったアイコン

三角の部分がちょっと曲がった、おしゃれな吹き出しです。

image

balloon10.html

<div class="balloon">
  CSSだけで吹き出しをつくる - 曲がったアイコン
  <br>左上にアイコン
</div>

balloon10.css

/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 20px;
  background-color: #107b5e;
  color: #ffffff;
  border-radius: 10px;
}
/* 色付きの半円 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  left: 20px;
  top: -15px;
  border-left: 20px solid #107b5e;
  border-top: 20px solid #107b5e;
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
/* 白い半円 */
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  left: 35px;
  top: -20px;
  border-left: 20px solid #ffffff;
  border-top: 20px solid #ffffff;
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

before疑似要素after疑似要素 を使用し、色付きの半円と白色の半円をずらして重ねてアイコンを表現しています。

枠線のしくみ

image

グラデーション

グラデーションの吹き出しです。 グラデーションの開始(もしくは終了)の色と三角アイコンの色を合わせることで違和感なくグラデーションにすることができます。

縦方向のグラデーションで横にアイコンを持ってくると、吹き出し本体とアイコンの境目がくっきりしてしまうので避けたほうが無難でしょう。

image

image

balloon11.html

<div class="balloon1">
  CSSだけで吹き出しをつくる - グラデーション
  <br>上にアイコン
</div>

<div class="balloon2">
  CSSだけで吹き出しをつくる - グラデーション
  <br>下にアイコン
</div>

balloon11.css

/* 吹き出し本体 */
.balloon1{
  position: relative;
  padding: 20px;
  background: linear-gradient(to bottom, #b3dced 0%,#29b8e5 100%);
  color: #ffffff;
}
/* グラデーションの開始の色に合わせた三角アイコン */
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  top: -15px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #b3dced;
  border-left: 15px solid transparent;
}

/* 吹き出し本体 */
.balloon2{
  position: relative;
  padding: 20px;
  background: linear-gradient(to bottom, #b3dced 0%,#29b8e5 100%);
  color: #ffffff;
}
/* グラデーションの終了の色に合わせた三角アイコン */
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #29b8e5;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

簡単作成!吹き出しジェネレータのご紹介

毎日CSSを触ってる人なら難なく作れてしまう吹き出しですが、普段はあまりHTMLやCSSを触らないという人にとっては少しとっつきにくいもの。 そんな人でも 吹き出し作成をサポートしてくれるジェネレーター があるのでご紹介します!

シンプルな吹き出しを作るならこれ!

CSS ARROW PLEASE!

image

URL:http://www.cssarrowplease.com/

吹き出しそのものを作れるジェネレータです。 シンプルなUIで簡単に吹き出しが作れます。

様々な三角形を簡単作成!

CSS三角形作成ツール

image

URL:http://apps.eky.hk/css-triangle-generator/ja

様々な形の三角形がとても簡単につくれます。 意外と混乱する三角形をボタンひとつで作れます。

グラデーションジェネレータの鉄板!

Ultimate CSS Gradient Generator

image

URL:http://grad3.ecoloniq.jp/

豊富なプリセットが最初から用意されているので初心者でも安心。カスタマイズも容易で、よく使うグラデーションをプリセットとして保存しておけるのでとても便利です。 ベンダープレフィクスなども合わせて生成されるので余計なことを考えなくてもOK!

まとめ

CSSだけで 通常・枠線・正円・影・マウスオーバー などなど、レスポンシブに対応した様々な吹き出しを作れることがわかりました。

コピペだけでなく、ジェネレータなどを活用してオリジナルの吹き出しづくりも楽しんでください!

Tech 2 GO編集部
ライター
Tech 2 GO編集部

関連記事