【CSS】吹き出しをつくる、三角の部分をちょっと曲げて素敵にする

2019.6.13
更新 2026.10.17
デザインのメモ
CSS

今回は、吹き出しの三角の部分をちょっと曲げて素敵にしてみました。
シンプルに三角だけなら簡単なのですが、「LINE風にしたい」というご要望がありまして。
シンプルに疑似要素の「:before」「:after」を使って重ねることで可能でした。
一度作ってしまえば、色も大きさも自由に変更できるのでとても便利ですね。
角丸はborder-radiusで調整しています。

パンみたいですねー

たしかにパンみたいですね。丁寧に作ることでおいしくなりますねー

吹き出し、三角の部分をちょっと曲げてみると素敵になる、右向きです。

コードを見る（HTML・CSS）

HTML

<div class="fukidasi_right">吹き出し<br>右向きです。</div>

CSS

/* ---------- 01 右向き ---------- */
/* 吹き出し本体 */
.fukidasi_right {
  position: relative;
  padding: 20px;
  background-color: #2b2a27;
  font-size: 16px;
  color: #ffffff;
  border-radius: 10px;
}
/* 色付きの半円 */
.fukidasi_right::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  right: -15px;
  top: 22px;
  border-left: 25px solid transparent;
  border-top: 25px solid #2b2a27;
  border-right: 25px solid transparent;
  border-bottom: 25px solid transparent;
}
/* 白い半円（背景と同じ色にする） */
.fukidasi_right::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  right: -25px;
  top: 40px;
  border-left: 25px solid transparent;
  border-top: 25px solid #ffffff;
  border-right: 25px solid transparent;
  border-bottom: 25px solid transparent;
}

見本ページをひらく（右向き）

吹き出し、三角の部分をちょっと曲げてみると素敵になる、左向きです。

コードを見る（HTML・CSS）

HTML

<div class="fukidasi_left">吹き出し<br>左向きです。</div>

CSS

/* ---------- 02 左向き ---------- */
/* 吹き出し本体 */
.fukidasi_left {
  position: relative;
  padding: 20px;
  background-color: #2b2a27;
  font-size: 16px;
  color: #ffffff;
  border-radius: 10px;
}
/* 色付きの半円 */
.fukidasi_left::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  left: -15px;
  top: 22px;
  border-left: 25px solid #2b2a27;
  border-top: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid transparent;
}
/* 白い半円（背景と同じ色にする） */
.fukidasi_left::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  left: -25px;
  top: 40px;
  border-left: 25px solid #ffffff;
  border-top: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid transparent;
}

見本ページをひらく（左向き）