CSSのみで吹き出しを作る方法

今回は画像を使用しなくても、CSSの疑似要素を使うだけで吹き出しを作成できる方法をご紹介します。

吹き出しの作成方法

borderプロパティと疑似要素::afterなどを組み合わせることで、CSSだけで吹き出しを作ることができます。

<div class="balloon">
	<p>吹き出し</p>
</div>

HTMLを記述します。

.balloon{
  background-color:#ddd;
　color:#222;
  border-radius:5px;
  position:relative;
}

吹き出し内の背景色と文字色を指定します。「border-radius」は吹き出しの角を丸めるために指定しているので、お好みで指定してください。

.balloon{
  background-color:#ddd;
  border-radius:5px;
  color:#222;
  position:relative;
  padding:8px;
  margin:50px;
}

「padding」と「margin」を指定します。paddingでテキストの上下の余白を広げることができます。marginは周りの要素や配置位置に合わせて指定しましょう。

.balloon{
  background-color:#ddd;
  border-radius:5px;
  color:#222;
  position:relative;
  padding:8px;
  margin:50px;
}
.balloon::after{
  border-left:solid 7px transparent;
  border-right:solid 7px transparent;
  border-top:solid 10px #ddd;
  bottom:-10px;
  content:"";
  display:block;
  height:0;
  left:50%;
  position:absolute;
  width:0;
}

下向きの吹き出しの場合は「border-left」と「border-right」を透明にして、「border-top」との境界線が斜めになることを利用して吹き出しの三角部分を作っています。「bottom:」で下に10pxずらすことで三角が見えるように配置します。「left:」の数値を変更することで、三角の位置を横方向に動かすこともできます。

上向き吹き出しの場合

.balloon{
  background-color:#ddd;
  border-radius:5px;
  color:#222;
  position:relative;
  padding:8px;
  margin:50px;
}
.balloon::after{
  border-left:solid 7px transparent;
  border-right:solid 7px transparent;
  border-bottom:solid 10px #ddd;
  top:-10px;
  content:"";
  display:block;
  height:0;
  left:30%;
  position:absolute;
  width:0;
}

右向き吹き出しの場合

.balloon{
  background-color:#ddd;
  border-radius:5px;
  color:#222;
  position:relative;
  padding:8px;
  margin:50px;
}
.balloon::after{
  border-top:solid 7px transparent;
  border-bottom:solid 7px transparent;
  border-left:solid 10px #ddd;
  right:-10px;
  content:"";
  display:block;
  height:0;
  top:20%;
  position:absolute;
  width:0;
}

.balloon{
  background-color:#ddd;
  border-radius:5px;
  color:#222;
  position:relative;
  padding:8px;
  margin:50px;
}
.balloon::after{
  border-top:solid 7px transparent;
  border-bottom:solid 7px transparent;
  border-right:solid 10px #ddd;
  left:-10px;
  content:"";
  display:block;
  height:0;
  top:60%;
  position:absolute;
  width:0;
}