画像として読み込みするのではなく、CSSで吹き出しを作る方法。
自分で作る時に迷わないようにするためのメモ。
右のようなのを作る

まずはhtml

fukidashi.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>吹き出し</title>
    <link rel="stylesheet" href="css/fukidashi.css">
  </head>
<body>
  <div class="text-center">
    <div class="fukidashi">
      <p>
        吹き出し
      </p>
    </div>
  </div>
</body>
</html>

次はcss

fukidashi.css

body {
	margin: 0;
}
.text-center {
	text-align: center;
	margin: 20px;
}
.fukidashi {
	background: #00bfff;
	position: relative;
	display: inline-block;
	width: 100px;
	height: 100px;
	padding: 0;
	max-width: 100%;
	box-sizing: border-box;
	border-radius: 50%;
	color: #ffffff;
}
.fukidashi p {
	margin: 0;
	position: absolute;
	top: 40px;
	left: 20px;
}
.fukidashi::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	display: block;
	width: 0;
	height: 0;
	margin: 0 auto;
	border-style: solid;
	border-width: 16px 8px 0 8px;
	border-color: #00bfff transparent transparent transparent;
}

●の丸みを決めているところは？

●の部分は

	border-radius: 50%;

で出来るのがすぐ分かった。

値を変えてみると

	border-radius: 25%;

右のようになる
「%」ではなく「px」でも指定出来る

	border-radius: 10px;

▼のところってどうなってるの！？

▼の部分をどうやって作っているか最初分からなかったので、それぞれのプロパティを見ていく。

content

▼の部分は疑似要素で作られているのでcontentプロパティが必須

	content: "";

プロパティ値に何もなければ空で良い

▼の位置を決める(position,left,right,bottom,display)

	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	display: block;

分かりやすくするために赤くしてありますが、↑の記述だと▼はここの位置

positionをコメントにすると

	/* position: absolute; */
	left: 0;
	right: 0;
	bottom: -10px;
	display: block;

このようになり、left,right,bottomの数字を変えても変化はありません

ボックスモデル(width,height,margin)

	width: 0;
	height: 0;
	margin: 0 auto;

一番分からなかったのはここから…
「幅も高さも0なのに▼になってる！？」って

▼を作っているプロパティは？

実はボーダーで▼になっているように見せていたんですね
分かりやすくするために以下のような記述にしてみました

	border-style: solid;
	border-width: 20px 20px 20px 20px;
	border-color: #ff0000 #2600ff #00ff37 #d72add;

全て同じ線幅だとこういう風になっていますつまり▼にするには **「border-width」で幅の調整をして** **「border-color」で上・右・下・左うち３つを透明(transparent)** という風にすれば良い

▼を任意の位置に持っていく

右側

.fukidashi::after {
	content: "";
	position: absolute;
	left: 90px;
	right: 0;
	bottom: 30px;
	display: block;
	width: 0;
	height: 0;
	margin: 0 auto;
	border-style: solid;
	border-width: 20px 0px 20px 20px;
	border-color: transparent transparent transparent #d72add;
}

上

.fukidashi::after {
	/* 疑似要素を使うときは「content」必ず書く！ */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 90px;
	display: block;
	width: 0;
	height: 0;
	margin: 0 auto;
	border-style: solid;
	border-width: 0px 20px 20px 20px;
	border-color: transparent transparent #00ff37 transparent;
}

左側

.fukidashi::after {
	/* 疑似要素を使うときは「content」必ず書く！ */
	content: "";
	position: absolute;
	left: -90px;
	right: 0;
	bottom: 30px;
	display: block;
	width: 0;
	height: 0;
	margin: 0 auto;
	border-style: solid;
	border-width: 20px 20px 20px 0px;
	border-color: transparent #2600ff transparent transparent;
}

効率的なやり方があったらご教授願いますm(__)m