CSS | 漫画のフキダシ（丸形バージョン）のCSSデザインサンプル
SVGで作成した漫画のフキダシをCSSでのカスタマイズを可能にしたデザインサンプルになります。
こちらは円形に尻尾があるノーマルバージョンになります。
漫画のフキダシ（丸形バージョン）
CSSで加工可能にした漫画のフキダシのデザイン、ノーマルバージョンの表示サンプルとサンプルコードになります。
See the Pen CSS | Fried egg by yochans (@yochans) on CodePen.
HTMLに設置した「.speech-bubble」がフキダシ本体部分になります。
テキストはSVGのtextタグでも作成可能ですが、利用やカスタマイズのしやすさを考えて「.speech-bubble」の中にpタグで作成しています。
「.speech-bubble path{}」にてフキダシ部分の加工、「.speech-bubble p{}」にてテキスト部分のカスタマイズが可能になっています。
<div class="contaner">
<div class="speech-bubble">
<svg width="1e3" height="1e3" version="1.1" viewBox="0 0 264.58 264.58" xmlns="http://www.w3.org/2000/svg">
<path d="m136.38 9.5251c-82.252 3.9069-115.93 97.206-92.948 159.54 8.1518 24.771 24.26 48.267 48.481 62.538-9.4816 11.016-24.253 16.831-37.633 23.049 18.327-0.71611 36.532-6.377 51.14-16.531 63.106 25.082 123.95-33.873 128.74-88.492 8.3375-48.564-10.212-105.94-59.626-131.18-11.673-5.7141-24.866-8.9484-38.151-8.9241z" fill="none" stroke="#000000" stroke-linejoin="round" stroke-width="1" />
</svg>
<p>吾輩は<br>猫である。</p>
</div>
</div>フキダシのサイズは「width」と「height」で調整できます。
フキダシは透過していますが、背景色を付けたい場合は「fill」に通常のCSSと同じくカラーコードを指定することで色を付ける事が可能です。
フキダシの枠色は「stroke」、太さは「stroke-width」で指定可能です。
コメントアウトしてありますが、フキダシの枠を破線（点線）にする用のコードを書いてあります。
フキダシの尻尾の向きを逆にしたい場合は「transform」の「scaleX()」に「-1」を指定して下さい。
.contaner {
position: relative;
width: 100%;
height: 260px;
}
.speech-bubble {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 100%;
}
.speech-bubble svg {
position: absolute;
top: 0;
left: 0;
width: 220px;
height: 220px;
transform: translate(-50%, -50%) scaleX(1); /* scale(-1)で左右反転 */
}
.speech-bubble path {
fill: none;
stroke: #000;
stroke-width: 1;
/* 破線にする場合 */
/* stroke-dasharray: 3, 3; */
/* stroke-dashoffset: 1; */
}
.speech-bubble p {
position: absolute;
top: 0;
left: -14px;
font-size: 22px;
color: #404040;
writing-mode: vertical-rl;
text-align: left;
transform: translate(-50%, -50%);
}縦書きではなく横書きにする場合は以下のCSSコードを外します。
writing-mode: vertical-rl;
text-align: left;