CSS | 吹き出しのCSSデザインサンプル集

2020-06-232021-02-10CSS デザイン サンプル集,CSS

CSSで作った吹き出しデザインの色々なパターンの一覧です。

CSSの吹き出しデザイン ノーマル

シンプルなCSS吹き出しパターンです。
下の方にカラーバリエーション用のCSSも置いてあります。

See the Pen CSS balloon Shadow by yochans (@yochans) on CodePen.

.balloon{
  position: relative;
  width: 75px;
  padding: 10px;
  margin:5px;
  background: #01579B;
  border-radius:10px;
  color:#FFF;
}

.balloon:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 16px;
  border: 5px solid transparent;
  border-top: 14px solid #01579B;
}

横幅を指定せず、横並びにしていない場合はこうなります。

See the Pen CSS balloon Shadow display block by yochans (@yochans) on CodePen.

CSSの吹き出しデザイン 影付き

ノーマルの吹き出しに影を付けたバージョンです。

See the Pen CSS balloon Normal by yochans (@yochans) on CodePen.

.balloon{
  position: relative;
  width: 75px;
  padding: 10px;
  margin:5px;
  background: #01579B;
  border-radius:10px;
  color:#FFF;
  filter: drop-shadow(3px 4px 2px rgba(0, 0, 0, 0.5));
}

.balloon:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 16px;
  border: 5px solid transparent;
  border-top: 14px solid #01579B;
}

上記サンプルの影はfilterのdrop-shadowを利用しています。

drop-shadowは調節が大変なbox-shadowと違って設定が簡単ですが、上記サンプルのままでは文字にも影がついてしまっていますのでご注意ください。

CSSの吹き出しデザイン 小さい円（1~2文字向け）

円形の吹き出しです。
可変未対応でフォントサイズにもよりますが1~2文字向けとなっています。

See the Pen CSS balloon Mini circle by yochans (@yochans) on CodePen.

.balloon{
  position: relative;
  display:flex;
  justify-content: center;
  align-items: center;
  width:50px;
  height:50px;
  padding: 10px;
  margin: 5px;
  font-size: 22px;
  background: #01579B;
  border-radius:50%;
  color:#FFF;
  filter: drop-shadow(3px 4px 2px rgba(0, 0, 0, 0.5));
}

.balloon:after {
  content: "";
  position: absolute;
  top: 65px;
  left: 29px;
  border: 6px solid transparent;
  border-top: 18px solid #01579B;
}

CSSの吹き出しデザイン 大きめ

大きめの吹き出しデザインです。

ちょっとHTMLもCSSも長めになっています。

See the Pen CSS balloon Large by yochans (@yochans) on CodePen.

<div class="balloon blue">
  <div class="arrow"></div>
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>
  <p class="text">Balloon!!</p>
</div>

.container{
  display:flex;
	flex-wrap: wrap;
}

/* 横並び用 */
.balloon{
  position: relative;
  width: 220px;
  height: 180px;
}

.balloon *{
  position: absolute;
  background: #01579B;
  border-radius:50%;
}

.balloon .top{
  top: 0;
  left: 75px;
  width: 100px;
  height: 50px;
}

.balloon .middle {
  top: 25px;
  left: 0;
  width: 200px;
  height: 110px;
}

.balloon .bottom {
  top: 110px;
  left: 20px;
  width: 100px;
  height: 50px;
}

.balloon .arrow {
  top: 114px;
  left: 140px;
  width: 40px;
  height: 40px;
}

.balloon .arrow:after {
  content: '';
  position: absolute;
  top: 6px;
  left: -12px;
  width: 40px;
  height: 38px;
  border-radius:50%;
  background: #FFF;
}

.balloon .text{
  top: 45px;
  left: 58px;
  font-size:20px;
  color:#FFF;
}


/*以下カラーバリエーション用*/
.white *{
  background: #FFF;
  color: #000;
}

.blue *{
  background: #0091EA;
}

.red *{
  background: #FF5252;
}

.green *{
  background: #43A047;
}

.brown *{
  background: #5D4037;
}

.gray *{
  background: #616161;
}

.black *{
  background: #000000;
}

カラーバリエーション用CSS（共通）

サンプルに利用しているカラーバリエーション用のCSSです。

/*以下カラーバリエーション用*/
.white{
  background: #FFF;
  color: #000;
}

.white:after {
border-top-color: #FFF;
}


.blue{
  background: #0091EA;
}

.blue:after{
  border-top-color: #0091EA;
}

.red{
  background: #FF5252;
}

.red:after{
  border-top-color: #FF5252;
}

.green{
  background: #43A047;
}

.green:after{
  border-top-color: #43A047;
}

.brown{
  background: #5D4037;
}

.brown:after{
  border-top-color: #5D4037;
}

.gray{
  background: #616161;
}

.gray:after{
  border-top-color: #616161;
}

.black{
  background: #000000;
}

.black:after{
  border-top-color: #000000;
}