CSSで吹き出しを作る方法

CSSで吹き出しを作る方法を紹介します。

イラスト等と組み合わせて使うことで、コメント風のコンテンツを作ることができます。

使用する機会はそこまで多くはないかもしれませんが、サイトにアクセントを付けたいときなどに使ってみてください。

CSSで吹き出しを作るサンプルコード

HTML

<div class="fukidashi">
  テキストテキストテキストテキスト
</div>

CSS

/* 吹き出し本体 */
.fukidashi {
  position: relative;
  width: 400px;  /* 吹き出しの横幅 */
  padding: 20px;  /* 内側の余白 */
  background: #00ba88;  /* 吹き出しの色 */
  border-radius: 10px; /* 角を丸くする*/
}
/* 吹き出しの出っ張り部分 */
.fukidashi::after {
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0;
  bottom: -10px;
  width: 0;
  height: 0;
  margin: auto;
  border-style: solid;
  border-width: 10px 10px 0 10px; /* 出っ張り部分のサイズ */
  border-color: #00ba88 transparent transparent transparent; /* 出っ張り部分の色 */
}

サンプル