.css

/**
 * 下方向に三角形のしっぽを持つ吹き出し形状。
 * CSS shape() 関数を使用し、clip-path で切り抜く。
 * border-shape でボーダーを描画する。
 */
.balloon {
  padding-block: 40px calc(40px + calc(12px * tan(60deg)));
  padding-inline: clamp(24px, 5%, 48px);
  clip-path: shape(
    from 12px 0,
    hline to calc(100% - 12px),
    curve to right 12px with right top,
    vline to calc(100% - (12px + calc(12px * tan(60deg)))),
    curve to calc(100% - 12px) calc(100% - calc(12px * tan(60deg))) with right calc(100% - calc(12px * tan(60deg))),
    hline to calc(50% + 12px),
    line by -12px calc(12px * tan(60deg)),
    line by -12px calc(calc(12px * tan(60deg)) * -1),
    hline to 12px,
    curve to left calc(100% - (12px + calc(12px * tan(60deg)))) with left calc(100% - calc(12px * tan(60deg))),
    vline to 12px,
    curve to 12px top with left top,
    close
  );
  border: 4px solid #d19f9c;
  border-shape: shape(
    from 12px 0,
    hline to calc(100% - 12px),
    curve to right 12px with right top,
    vline to calc(100% - (12px + calc(12px * tan(60deg)))),
    curve to calc(100% - 12px) calc(100% - calc(12px * tan(60deg))) with right calc(100% - calc(12px * tan(60deg))),
    hline to calc(50% + 12px),
    line by -12px calc(12px * tan(60deg)),
    line by -12px calc(calc(12px * tan(60deg)) * -1),
    hline to 12px,
    curve to left calc(100% - (12px + calc(12px * tan(60deg)))) with left calc(100% - calc(12px * tan(60deg))),
    vline to 12px,
    curve to 12px top with left top,
    close
  );
  color: #2c2c2c;
  background-color: #f5f5f5;
}

.html

<div class="balloon">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>