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

2787 ワード
HTML CSS Design WebDesign HTML テキストリンク

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;
}