CSS - 吹き出しアイコン

HTMLとCSSを使用してシンプルな吹き出しアイコンを描画する方法のコード例です。

HTMLコードは吹き出しアイコンを描画する要素となる<div>タグのクラス名 "speech-bubble-icon" を設定しています。
3つのドット部分には子要素<div>タグを設置しています。

<div class="speech-bubble-icon">
	<div></div>
</div>

CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。
「--color」にてベースカラーを設定しています。

ドット部分は本体、疑似要素「before」と「after」で左側から並べています。

/* 吹き出しアイコン */
.speech-bubble-icon {
	--w: 300px; /* 基準サイズ */
	--color: #a1b4cc; /* ベースカラー */
	position: relative;
	width: var(--w);
	height: var(--w);
}

.speech-bubble-icon::before {
	content: "";
	position: absolute;
	top: 10%;
	left: 5%;
	width: 90%;
	height: 70%;
	background-color: var(--color);
	border-radius: 35%;
}

.speech-bubble-icon::after {
	content: "";
	position: absolute;
	top: 60%;
	left: 30%;
	width: calc(var(--w) / 3.75);
	height: calc(var(--w) / 3.75);
	border-bottom: calc(var(--w) / 7) solid var(--color);
	border-radius: 0 0 calc(var(--w) / 3) 0;
	transform: rotate(90deg);
}

/* ドット部分 */
.speech-bubble-icon div {
	position: absolute;
	top: 38%;
	left: 15%;
	width: calc(var(--w) / 6);
	height: calc(var(--w) / 6);
	background-color: #fff;
	border-radius: 50%;
}

.speech-bubble-icon div::before {
	content: "";
	position: absolute;
	left: 155%;
	width: calc(var(--w) / 6);
	height: calc(var(--w) / 6);
	background-color: #fff;
	border-radius: 50%;
}

.speech-bubble-icon div::after {
	content: "";
	position: absolute;
	left: 310%;
	width: calc(var(--w) / 6);
	height: calc(var(--w) / 6);
	background-color: #fff;
	border-radius: 50%;
}