HTMLとCSSでマンガの吹き出しを作る方法

針吹き出しや破れ吹き出し等を作りたい

HTMLとCSSだけで、マンガでよくある、針吹き出しや所謂"破れ"と云われる吹き出しを作る方法はありますか?

調べてみたのですが、現時点に於きまして、そう云ったものが見当たりません。

Lhankor_Mhy

2018/05/10 09:11

「破れ吹き出し」でググったのですが、いまひとつわかりませんでした。例示できますか？

siu_long

2018/05/10 09:28

『ポプテピピック』に色々あります。

退会済みユーザー

2018/05/10 23:35

そういうことを後出ししないで、上の質問の一行目に書いて参考 url を書いてください。後出しはマナー違反と言っても過言じゃないと思います。

root_jp

2018/05/11 00:44

あと、「レスポンシブ対応」「枠線を縦線集合で作る」などもやりたいようです。後出しが多すぎるのでマッチした回答は得られないと思います。

siu_long

2018/05/15 03:01

色々忙しいのと、ここの使い方が能く判らないので、時間に追われる形で、概要だけの説明になってしまいました。後、最近の『漫画村』事件関係もあり、URIを例示出来なかったのです。余り頻繁には来られないと思うので、気長に回答をお待ち致します。

行動規範の内容に同意します

回答4件

単純な吹き出しであれば割と簡単にできます。
https://saruwakakun.com/html-css/reference/speech-bubble

複雑なものでも、clip-path: polygonを使えばある程度いけると思います。
ただし、IEやEdgeで非対応。
https://www.webprofessional.jp/introducing-css-clip-path-property/

投稿2018/05/10 10:14

編集2018/05/10 10:18

root_jp

総合スコア4666

siu_long

2018/05/10 20:16

レスポンスデザイン非対応でしょうそれ…。ブラウザの幅を変えても、吹き出しのデザインが崩れない、それでいて大きさや高さは、ブラウザに支配されない(切れたりしない)様にしたいのです。後、枠線を縦線集合で作るとかもやりたいので。

root_jp

2018/05/11 00:41

レスポンシブはメディアクエリーで自分でコントロールすればいいと思うのですが。。。

行動規範の内容に同意します

SVGを利用してみてはいかがでしょうか？

<svg version="1.1" id="hari" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="150,11.222 165.1,35.34 185.914,15.948 194.261,43.155 
	219.389,29.817 220.405,58.249 248.132,51.868 241.751,79.6 270.188,80.611 256.851,105.745 284.046,114.08 264.654,134.906 
	288.778,150 264.654,165.094 284.046,185.92 256.851,194.255 270.188,219.39 241.751,220.4 248.132,248.132 220.405,241.751 
	219.389,270.184 194.261,256.845 185.914,284.052 165.1,264.66 150,288.778 134.906,264.66 114.08,284.052 105.745,256.845 
	80.611,270.184 79.6,241.751 51.868,248.132 58.249,220.4 29.817,219.39 43.155,194.255 15.948,185.92 35.34,165.094 11.222,150 
	35.34,134.906 15.948,114.08 43.155,105.745 29.817,80.611 58.249,79.6 51.868,51.868 79.6,58.249 80.611,29.817 105.745,43.155 
	114.08,15.948 134.906,35.34 "/>
</svg>

これで24角形の針吹き出しになるはずです。
上記を普通に

<body></body>の中に入れてご確認ください。吹き出しの中の文字はposition:relative;とposition:absolute;でどうにかなるかと思います。

投稿2018/05/10 09:34

編集2018/05/10 09:42

Samson818

総合スコア162

siu_long

2018/05/10 20:11

レスポンスデザイン対応にする為に、幅や高さを自由に変化させたいんですが、画像ですと、それが出来ません。その為に、HTMLとCSSだけで作りたいのです。

Samson818

2018/05/17 03:01

こちらの方法で対応可能かと思われます。 https://qiita.com/SFPGMR/items/f32855b9cf038f5654bd これでHTMLとCSSだけで完成しましたかね？

Samson818

2018/05/17 03:05

上記svgはイラストレーターから出力しましたが、画像をsvgに変換してくれるサービスやアプリもいろいろあるようですので、ご利用いただくと簡単に図形がsvg化できると思います。 pngからSVGへのコンバーター https://convertio.co/ja/png-svg/ SVG出力アプリ https://totoco.org/how-to-use-potrace

行動規範の内容に同意します

通常画像を使うのではないかと思いますが、border-imageで近いものができそうです。
border-image
https://developer.mozilla.org/ja/docs/Web/CSS/border-image
(参考)
https://allabout.co.jp/gm/gc/441025/3/

投稿2018/05/10 09:19