CSS | 漫画のフキダシ（四角形バージョン）のCSSデザインサンプル
SVGで作成した漫画のフキダシをCSSでのカスタマイズを可能にしたデザインサンプルになります。
こちらは四角形のフキダシバージョンになります。
漫画のフキダシ（四角形バージョン01）
CSSで加工可能にした漫画のフキダシのデザイン、ひとつ目の四角形バージョンの表示サンプルとサンプルコードになります。
See the Pen CSS | speech balloons（normal version） 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">
<p>吾輩は<br>猫である。</p>
<svg width="1e3" height="1e3" version="1.1" viewBox="0 0 264.58 264.58" xmlns="http://www.w3.org/2000/svg">
<path d="m69.113 33.073h126.36c3.1094 0 5.6126 0 5.6126 1e-6v191.82h-5.6126-126.36-5.6127v-191.82c0-1e-6 2.5032-1e-6 5.6127-1e-6z" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
</svg>
</div>
</div>フキダシのサイズは「width」と「height」で調整できます。
フキダシは透過していますが、背景色を付けたい場合は「fill」に通常のCSSと同じくカラーコードを指定することで色を付ける事が可能です。
フキダシの枠色は「stroke」、太さは「stroke-width」で指定可能です。
コメントアウトしてありますが、フキダシの枠を破線（点線）にする用のコードを書いてあります。
.speech-bubble {
position: absolute;
top: 50%;
left: 10%;
width: 0;
height: 100%;
}
.speech-bubble svg {
position: absolute;
top: 0;
left: 0;
width: 220px;
height: 220px;
}
.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: -20px;
font-size: 18px;
color: #404040;
writing-mode: vertical-rl;
text-align: left;
transform: translate(-50%, -50%);
}漫画のフキダシ（四角形バージョン02）
ふたつの四角形を重ねて作ったフキダシになります。
See the Pen CSS | speech balloons（square version 01） by yochans (@yochans) on CodePen.
<div class="contaner">
<div class="speech-bubble">
<p>吾輩は猫である。</p>
<p>名前はまだ<br>ない。</p>
<svg width="1e3" height="1e3" version="1.1" viewBox="0 0 264.58 264.58" xmlns="http://www.w3.org/2000/svg">
<path d="m121.18 211.67v31.75h-100.01v-137.58h77.787m0 0-1.1e-5 -87.313 5.8933-1e-6h132.68c3.2649 0 5.8933 0 5.8933 1e-6v193.15h-122.24" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
</svg>
</div>
</div>テキストの場所が2箇所になりますので、pタグをふたつに別けています。
「:nth-child()」を使って個別に位置を指定します。
.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%);
}
.speech-bubble path {
fill: none;
stroke: #000;
stroke-width: 1;
/* 破線にする場合 */
/* stroke-dasharray: 3, 3; */
/* stroke-dashoffset: 1; */
}
.speech-bubble p {
position: absolute;
font-size: 18px;
color: #404040;
writing-mode: vertical-rl;
text-align: left;
transform: translate(-50%, -50%);
}
.speech-bubble p:nth-child(1) {
top: -10px;
left: 10px;
}
.speech-bubble p:nth-child(2) {
top: 40px;
left: -70px;
}漫画のフキダシ（四角形バージョン03）
四角形の交差する場所を少しだけはみ出させたタイプです。
See the Pen CSS | speech balloons（square version 01） by yochans (@yochans) on CodePen.
<div class="contaner">
<div class="speech-bubble">
<p>吾輩は猫である。</p>
<p>名前はまだ<br>ない。</p>
<svg width="1e3" height="1e3" version="1.1" viewBox="0 0 264.58 264.58" xmlns="http://www.w3.org/2000/svg">
<path d="m121.71 201.08c-0.0755 14.111-0.13418 28.223 0 42.333h-100.54v-137.58h89.958m-11.642 10.583c-0.17639-32.632-0.35278-65.264-0.52918-97.896 48.154-2e-6 96.308-2e-6 144.46 0v193.15h-132.29" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
</svg>
</div>
</div>テキストの場所が2箇所になりますので、pタグをふたつに別けています。
「:nth-child()」を使って個別に位置を指定します。
四角形バージョン03は四角形バージョン02のものと同じもので使えます。
.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%);
}
.speech-bubble path {
fill: none;
stroke: #000;
stroke-width: 1;
/* 破線にする場合 */
/* stroke-dasharray: 3, 3; */
/* stroke-dashoffset: 1; */
}
.speech-bubble p {
position: absolute;
font-size: 18px;
color: #404040;
writing-mode: vertical-rl;
text-align: left;
transform: translate(-50%, -50%);
}
.speech-bubble p:nth-child(1) {
top: -10px;
left: 10px;
}
.speech-bubble p:nth-child(2) {
top: 40px;
left: -70px;
}