吹き出し ジェネレーター

しっぽの向き・位置・大きさと、角丸・色を決めると、吹き出しの CSS が出ます。HTML は <p class="bubble">ひとこと</p> のように、クラスを付けるだけです。

しっぽは ::after で作った正方形を 45° 回したもの。半分を吹き出しの中に重ねて、外に出た角だけを見せています。「線」のときは正方形の2辺にだけ線を引くので、線の吹き出しでもしっぽがつながって見えます。三角形を border で作る方法（三角形）よりも、線の吹き出しに向いています。

しっぽの位置を端に寄せすぎると、角丸のカーブにかかって浮いて見えます。角丸を大きくしたときは、位置を内側に寄せてください。

計算はこのブラウザの中だけで、入れた内容はどこにも送りません。