CSSで吹き出しを作る方法

2022年5月11日 2022年5月11日 7分11秒

1 CSSで吹き出しを作る方法

CSSで吹き出しを作る方法

最近、吹き出しで会話形式で説明をするページがあります。Wordpressを使用していたらプラグインで簡単に作れますが、CSSで簡単に作ることもできます。

今回は、以下のような吹き出しを作る方法です。

上向きの吹き出し

サンプル

See the Pen speech-bubble(top)-css by take it easy (@take-it-easy) on CodePen.

HTML

<!-- 上向き -->
<div class="speech-bubble top">あいうえお</div>

CSS

.speech-bubble {
  position: relative;
  top: 10px;
  left: 50px;
  width: 150px;
  /* 文字色 */
  color: #fff;
  /* 背景色 */
  background-color: #074BFF;
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 20px;
}

.top::after {
  content: " ";
  /* 位置 */
  position: absolute;
  top: -20px;
  left: 30px;
  /* サイズ */
  width: 0;
  height: 0;
  /* 吹き出しの口の部分（三角形） */
  border: 10px solid;
  border-color: transparent transparent #074BFF transparent;
}

右向きの吹き出し

サンプル

See the Pen speech-bubble(right)-css by take it easy (@take-it-easy) on CodePen.

HTML

<!-- 右向き -->
<div class="speech-bubble right">あいうえお</div>

CSS

.speech-bubble {
  position: relative;
  top: 10px;
  left: 50px;
  width: 150px;
  /* 文字色 */
  color: #fff;
  /* 背景色 */
  background-color: #074BFF;
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 20px;
}

.right::after {
  content: " ";
  /* 位置 */
  position: absolute;
  top: 12px;
  right: -20px;
  /* サイズ */
  width: 0;
  height: 0;
  /* 吹き出しの口の部分（三角形） */
  border: 10px solid;
  border-color: transparent transparent transparent #074BFF;
}

下向きの吹き出し

サンプル

See the Pen speech-bubble(bottom)-css by take it easy (@take-it-easy) on CodePen.

HTML

<!-- 下向き -->
<div class="speech-bubble bottom">あいうえお</div>

CSS

.speech-bubble {
  position: relative;
  top: 10px;
  left: 50px;
  width: 150px;
  /* 文字色 */
  color: #fff;
  /* 背景色 */
  background-color: #074BFF;
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 20px;
}

.bottom::after {
  content: " ";
  /* 位置 */
  position: absolute;
  bottom: -20px;
  left: 30px;
  /* サイズ */
  width: 0;
  height: 0;
  /* 吹き出しの口の部分（三角形） */
  border: 10px solid;
  border-color: #074BFF transparent transparent transparent;
}

左向きの吹き出し

サンプル

See the Pen speech-bubble(left)-css by take it easy (@take-it-easy) on CodePen.

HTML

<!-- 左向き -->
<div class="speech-bubble left">あいうえお</div>

CSS

.speech-bubble {
  position: relative;
  top: 10px;
  left: 50px;
  width: 150px;
  /* 文字色 */
  color: #fff;
  /* 背景色 */
  background-color: #074BFF;
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 20px;
}

.left::after {
  content: " ";
  /* 位置 */
  position: absolute;
  top: 12px;
  left: -20px;
  /* サイズ */
  width: 0;
  height: 0;
  /* 吹き出しの口の部分（三角形） */
  border: 10px solid;
  border-color: transparent #074BFF transparent transparent;
}