【css】cssのみで吹き出しを作成する方法6選

今回は、cssのみを使って吹き出しを作成する方法をご紹介いたします。
四角形や正円など全部で6パターンご紹介したいと思います。

目次

1. 四角形の吹き出し

完成形デモ

See the Pen 四角形の吹き出し by crnote (@crnote) on CodePen.

html

htmlの記述は以下の通りです。
上向き・下向き・右向き・左向きの4パターンを作成します。

  1. <div class="ballon ballon1">
  2.   <p>上向きの吹き出し</p>
  3. </div>
  5. <div class="ballon ballon2">
  6.   <p>下向きの吹き出し</p>
  7. </div>
  9. <div class="ballon ballon3">
  10.   <p>右向きの吹き出し</p>
  11. </div>
  13. <div class="ballon ballon4">
  14.   <p>左向きの吹き出し</p>
  15. </div>

CSS

cssでは、吹き出しの四角形の部分と三角形の部分を作成します。
三角形の部分は、beforeの疑似要素で表現します。

四角形のCSS
  1. .ballon {
  2.   position: relative;
  3.   background-color: #FDD5DF;
  4.   width: 50%;
  5.   text-align: center;
  6.   padding: 5px;
  7.   margin: 50px;
  8. }
三角形のCSS

三角形はborderプロパティを使って作成します。三角形の詳しい作成方法は過去の記事で解説していますので、参考にしてみてください。

【css】cssのみで吹き出しを作成する方法

三角形の形が作成出来たら、位置を指定します。
calc()は値を計算式で指定できます。「left: calc(50% – 20px);」と指定することで、三角形を中央に配置することが出来ます。

  1. /*上向の吹き出し*/
  2. .ballon1:before {
  3.   position: absolute;
  4.   content: "";
  5.   display: block;
  6.   width: 0;
  7.   height: 0;
  8.   /*三角形を作る*/
  9.   border-right: 20px solid transparent;
  10.   border-left: 20px solid transparent;
  11.   border-bottom: 20px solid #FDD5DF;
  12.   /*三角形の位置を指定*/
  13.   top: -20px;
  14.   left: calc(50% - 20px);
  15. }

その他の向きの吹き出しは、三角形の形と位置を変えて作成します。
上記の完成形デモのソースを参考にしてみてください。

2. 四角形の吹き出し（枠線）

完成形デモ

See the Pen 四角形の吹き出し（枠線） by crnote (@crnote) on CodePen.

CSS

枠線の場合は、brforeとafterの2つの疑似要素を使って、背景の三角形と枠線用の三角形を作成します。

四角形のCSS

「background-color」で背景色を、「border」で枠線の色を指定します。

  1. .ballon {
  2.   position: relative;
  3.   background-color: #FFF;
  4.   border: 3px solid #FFB6C1;
  5.   width: 50%;
  6.   text-align: center;
  7.   padding: 5px;
  8.   margin: 50px;
  9. }
背景と枠線用の三角形のCSS

beforeの疑似要素で背景色の三角形、afterの疑似要素で枠線用の三角形を作成します。
「z-index」を使って背景色の三角形が枠線用の三角形より上になるように指定します。

  1. /*上向の吹き出し（背景白の三角形）*/
  2. .ballon1:before {
  3.   position: absolute;
  4.   content: "";
  5.   display: block;
  6.   width: 0;
  7.   height: 0;
  8.   /*三角形を作る*/
  9.   border-right: 20px solid transparent;
  10.   border-left: 20px solid transparent;
  11.   border-bottom: 20px solid #FFF;
  12.   /*三角形の位置を指定*/
  13.   top: -20px;
  14.   left: calc(50% - 20px);
  15.   /*枠線用の三角形より上に*/
  16.   z-index: 2;
  17. }
  18. /*上向の吹き出し（枠線用の三角形）*/
  19. .ballon1:after {
  20.   position: absolute;
  21.   content: "";
  22.   display: block;
  23.   width: 0;
  24.   height: 0;
  25.   /*三角形を作る*/
  26.   border-right: 24px solid transparent;
  27.   border-left: 24px solid transparent;
  28.   border-bottom: 24px solid #FFB6C1;
  29.   /*三角形の位置を指定*/
  30.   top: -24px;
  31.   left: calc(50% - 24px);
  32.   /*白背景のの三角形より下に*/
  33.   z-index: 1;
  34. }

3. 四角形の吹き出し（シャドウ）

完成形デモ

See the Pen 四角形の吹き出し（シャドウ） by crnote (@crnote) on CodePen.

CSS

四角形のCSS

吹き出しにシャドウを付けたい場合には、「.ballon」に「filter: drop-shadow()」を使って指定します。
filterプロパティの指定方法は、

filter: drop-shadow(水平方向 垂直方向 ぼかし シャドウの色);

となります。

しかしfilterプロパティは、IEやOperaでの表示に不安があります。対応ブラウザにについては確認が必要です。

  1. .ballon {
  2.   position: relative;
  3.   background-color: #FDD5DF;
  4.   width: 50%;
  5.   text-align: center;
  6.   padding: 5px;
  7.   margin: 50px;
  8.   filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
  9.   -webkit-filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
  10. }
三角形のCSS
  1. /*上向の吹き出し*/
  2. .ballon1:before {
  3.   position: absolute;
  4.   content: "";
  5.   display: block;
  6.   width: 0;
  7.   height: 0;
  8.   /*三角形を作る*/
  9.   border-right: 20px solid transparent;
  10.   border-left: 20px solid transparent;
  11.   border-bottom: 20px solid #FDD5DF;
  12.   /*三角形の位置を指定*/
  13.   top: -20px;
  14.   left: calc(50% - 20px);
  15. }

4. 角丸の吹き出し

完成形デモ

See the Pen 角丸の吹き出し by crnote (@crnote) on CodePen.

CSS

角丸の吹き出しは、四角形のCSSに「border-radius」で角丸の値を指定して作成します。

  1. .ballon {
  2.   position: relative;
  3.   background-color: #FDD5DF;
  4.   width: 50%;
  5.   text-align: center;
  6.   padding: 5px;
  7.   margin: 50px;
  8.   /*角丸の設定*/
  9.   border-radius: 10px;
  10. }
  11. /*上向の吹き出し*/
  12. .ballon1:before {
  13.   position: absolute;
  14.   content: "";
  15.   display: block;
  16.   width: 0;
  17.   height: 0;
  18.   /*三角形を作る*/
  19.   border-right: 20px solid transparent;
  20.   border-left: 20px solid transparent;
  21.   border-bottom: 20px solid #FDD5DF;
  22.   /*三角形の位置を指定*/
  23.   top: -20px;
  24.   left: calc(50% - 20px);
  25. }

5. 正円の吹き出し

完成形デモ

See the Pen 正円の吹き出し by crnote (@crnote) on CodePen.

CSS

cssでは、吹き出しの正円の部分と三角形の部分を作成します。

正円のCSS

「width」と「height」に同じ値をしてします。
また「line-height」にも同じ値を指定することで、文字が垂直方向の中央になります。
「border-radius: 50%;」を指定することで、正円を作ることが出来ます。

  1. p {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. .ballon {
  6.   position: relative;
  7.   background-color: #FDD5DF;
  8.   width: 80px;
  9.   height: 80px;
  10.   line-height: 80px;
  11.   font-size: 14px;
  12.   text-align: center;
  13.   margin: 50px;
  14.   /*正円を作る*/
  15.   border-radius: 50%;
  16. }
三角形のCSS

三角形のCSSは同様です。
正円と三角形が離れすぎないように位置は調整してください。

  1. /*上向の吹き出し*/
  2. .ballon1:before {
  3.   position: absolute;
  4.   content: "";
  5.   display: block;
  6.   width: 0;
  7.   height: 0;
  8.   /*三角形を作る*/
  9.   border-right: 15px solid transparent;
  10.   border-left: 15px solid transparent;
  11.   border-bottom: 15px solid #FDD5DF;
  12.   /*三角形の位置を指定*/
  13.   top: -10px;
  14.   left: calc(50% - 15px);
  15. }

6. 考え事してる風の吹き出し

完成形デモ

See the Pen 考え事してる風の吹き出し by crnote (@crnote) on CodePen.

CSS

最後に考え事をしている風の吹き出しです。
brforeとafterの2つの疑似要素を使って、四角形の隣に2つの正円を作成します。

四角形のCSS

「border-radius」を使って、角丸の四角形を作成します。

  1. .ballon {
  2.   position: relative;
  3.   background-color: #FDD5DF;
  4.   width: 60%;
  5.   text-align: center;
  6.   padding: 5px;
  7.   margin: 30px 80px;
  8.   border-radius: 15px;
  9. }
2つの正円のCSS

正円の作り方は、先ほどご紹介した「5. 正円の吹き出し」と同じくです。
beforeとafterの疑似要素で、大きい円と小さい円の2種類を作成し、位置をずらして配置します。

  1. /*大きい円*/
  2. .ballon1:before {
  3.   position: absolute;
  4.   content: "";
  5.   display: block;
  6.   width: 23px;
  7.   height: 23px;
  8.   background-color: #fdd5df;
  9.   border-radius: 50%;
  10.   /*円の位置を指定*/
  11.   left: -30px;
  12.   bottom: 10px;
  13. }
  14. /*小さい円*/
  15. .ballon1:after {
  16.   position: absolute;
  17.   content: "";
  18.   display: block;
  19.   width: 15px;
  20.   height: 15px;
  21.   background-color: #fdd5df;
  22.   border-radius: 50%;
  23.   /*円の位置を指定*/
  24.   left: -50px;
  25.   bottom: 0;
  26. }

まとめ

cssのみで吹き出しを作成する方法を6パターンご紹介いたしました。
見出しや会話部分などに使用していただける手法かと思います。
色や大きさなどを適宜変更して、使ってみてください！

PAGE TOP