CSSで吹き出しを作成する方法

HTMLとCSSで簡単な吹き出しを作成する方法をメモ書き程度に残しておきます。
もともと、Wordpressでやっているブログのちょっとしたデザイン変更で書いたけれど、何となくいらなくなった。
デモは以下のような感じ。

【デモデザイン】 CSSで作る吹き出しデザイン

html

<p>
  <span class="check-point-ballon">
    Point
  </span>
  吹き出しを作成したよ
</p>

css

.check-point-ballon {
  background-color: #415cf5;
  padding: 9px;
  color: white;
  border-radius: 9px;
  text-align: center;
  position: relative;
  margin-right: 10px;
}

.check-point-ballon::before {
    content: '';
    position: absolute;
    right: -22px;
    border-style: solid;
    border-width: 13px;
    border-color: transparent transparent transparent #415cf5;
}