CSSで作るシンプルな吹き出し(通常、枠線のみ、下線のみ)パターン

コーディングのヘルプに入った際、デザインに吹き出しがあったのでcssで対応したわけですが、その時に作成した枠線のみの吹き出しと下線のみの吹き出しのコーディングメモ。

スポンサーリンク


通常の吹き出しと合わせて、cssで作るシンプルな吹き出しのパターンとしての備忘録です。

htmlは以下のように作りました。すべて共通です。

html

<div class="balloon">
	<p>普通の吹き出し</p>
</div>
/*classは任意*/

疑似要素の::beforeと::afterが重要なので、html側はシンプルです。
吹き出しにしたい要素をclassで囲ってしまえばOKです。

普通の吹き出し

サンプルページを表示

よくある普通の吹き出し。
特に説明はいらないかなと思います。

css

.balloon {
 	position: relative;
	display: inline-block;
	background-color: #eee;
	padding: 16px;
	min-width: 240px;
 	max-width: 100%;
	text-align: center;
}
.balloon::before {
	content: "";
	position: absolute;
	border: solid 12px transparent;
	border-top: solid 12px #eee;
	top: 100%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.balloon p {
	margin: 0;
	padding: 0;
}

吹き出しの四隅を角丸にしたければ、border-radiusを入れればOKです。

枠線のみの吹き出し

サンプルページを表示

枠線のみの吹き出しは、::beforeと::after両方を用いて作ります。
イメージとしては、::afterの位置を上に数ピクセルずらすことで背景の役割となり、::beforeが枠線の役割をしています。

html
上記と同じものを使います。
css

.balloon {
 	position: relative;
	display: inline-block;
	background-color: #fff;
	border: solid 2px #525252;
	padding: 16px;
	min-width: 240px;
 	max-width: 100%;
	text-align: center;
}
.balloon:before,
.balloon:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.balloon:before {
	border: solid 12px transparent;
	border-top: solid 12px #525252;
}
.balloon:after {
	border: solid 14px transparent;
	border-top: solid 14px #fff;
	margin-top: -5px;
}
.balloon p {
	margin: 0;
	padding: 0;
}

balloonのborderをdashedにすれば点線の吹き出しになります。

下線のみの吹き出し

サンプルページを表示

言葉として正しいかは不明ですが、下線のみの吹き出しのパターン。
難しく考えることはなく、必要なのは下線のみなのでborderをbottomのみにします。

html
上記と同じものを使います。
css

.balloon {
 	position: relative;
	display: inline-block;
	background-color: #fff;
	border-bottom: solid 2px #525252;
	padding: 16px;
	min-width: 240px;
 	max-width: 100%;
	text-align: center;
}
.balloon:before,
.balloon:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.balloon:before {
	border: solid 12px transparent;
	border-top: solid 12px #525252;
}
.balloon:after {
	border: solid 14px transparent;
	border-top: solid 14px #fff;
	margin-top: -5px;
}
.balloon p {
	margin: 0;
	padding: 0;
}

ちょっとしたセリフっぽいところとか、見出しっぽくも使えると思います。
実際に使ったときは見出しで使いました。

ひとまず業務で使ったものを備忘録としてメモしましたが、他のデザインも少し付け加えるだけで作れたりします。
ここでは作りませんが、デザインをまとめられていた参考サイト様がありましたので、そちらを参考にしていただければ。
また、吹き出しジェネレータなる便利なサイトもあるので、活用するのもありかなと思います。

参考
CSSで作る！吹き出しデザインのサンプル19選
https://saruwakakun.com/html-css/reference/speech-bubble

cssarrowplease
http://www.cssarrowplease.com/

素材アイコン
アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
http://icooon-mono.com/

PAGE TOP