CSS에서 연설 거품을 만드는 방법

【데모 디자인】 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;
}