CSSで三角の吹き出しを作る方法

CSSだけで三角形の吹き出しを作るには2種類の方法があります

borderで三角を表現する

まずは古えから伝わるborderで作る方法です。
borderをtop・right・left・bottomそれぞれ個別に設定することで三角形にします。
borderの厚み以外は不要なのでwidthとheightは０にしておきましょう。

div{
  width: 0;
  height: 0;
  margin: auto;
  border-bottom: 80px tomato solid;
  border-right: 50px transparent solid;
  border-left: 50px transparent solid;
}

尖らせたい方向のborderをなしにすることで、残りの辺のborderが間を埋めていく仕組みです。
rightとleftにtransparent(透明)を指定しているのでbottomに指定した色だけが表現され、三角形に見えます。左右にも色をつけると分かりやすいでしょうか。左右のborderを黒にしてみます。

例の場合では、bottomの値が高さ、right leftの値が幅を決めています。
縦横２辺のみ指定すると直角三角形となります。

linear-gradientで三角形を作る

グラデーションに使うlinear-gradientですが、%で細かく位置指定すればベタ塗りができますのでそれを利用します。

div{
  width: 100px;
  height: 100px;
  margin: auto;
  background:
      linear-gradient(to bottom right, transparent 50%, tomato 50%) top left/50% 100% no-repeat,
      linear-gradient(to bottom left, transparent 50%, red 50%) top right/50% 100% no-repeat;
}

分かりやすく色を変えています。
backgroundにショートハンドで「image(gradient)・position(top left) ・size(50% 100%) ・repeat(no-repeat)」の値を指定し、左右に２つつなげることで三角にします。もちろん上下でも可能。
慣れるとこちらの方が楽かも知れません。