どうも！LSSです！！
今回は、「漫画のような雲型のフキダシをSVGで描いてみたけど下手すぎた」話と、「雲型のフキダシSVGを画像borderに使用してみたけど…」という話の２本立てでお送りします！！
SVGで描いてみたフキダシ
なんとか頑張って描いてみました（例によってコード手打ち）
中の四角は後で消しますが、文字を入れるスペースを確保するための目安です。
コード
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 20 12">
<rect x="3" y="1.5" width="15" height="7" fill="white" stroke="gray" stroke-width="0.1"></rect><!--この四角はあとで消す-->
<path d="M 0.1,8 q 1.5,0.1 2.4,-1.5 q -2,-1.5 0,-3 q -2,-2.5 2,-3 q 2,0 2,0.5 q 2,-1.5 4,0.3 q 3.5,-2.1 5,-0.2 q 1.8,-1 3,0 q 1,1 0,2 q 1.5,2 -0.3,4 q 1.2,2 -1,2 q -1.5 1 -3,0 q -1,1.5 -3.5,0 q -2.5,1.5 -4,0 q -1.5,1 -2.5,0.2 q -2.5,1 -2,-1.5 q -0.5,0.5 -2,0.2 z" fill="none" stroke="black" stroke-width="0.1"></path>
</svg>
かっこいいフキダシとは
今回はベジェ曲線を多用して描きましたが、フキダシの描き方って自由なんだか法則性があるんだかよく分からないですね^^;
楕円を重ねる描き方のほうが、かっこよくなるのかな？とか思いつつ…とりあえずこれでいいやｗ
以下、未解決案件^^;
コード
<style><!--
.fkds{
box-sizing:border-box;
border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewbox="0 0 20 12"><path d="M 0.1,8 q 1.5,0.1 2.4,-1.5 q -2,-1.5 0,-3 q -2,-2.5 2,-3 q 2,0 2,0.5 q 2,-1.5 4,0.3 q 3.5,-2.1 5,-0.2 q 1.8,-1 3,0 q 1,1 0,2 q 1.5,2 -0.3,4 q 1.2,2 -1,2 q -1.5 1 -3,0 q -1,1.5 -3.5,0 q -2.5,1.5 -4,0 q -1.5,1 -2.5,0.2 q -2.5,1 -2,-1.5 q -0.5,0.5 -2,0.2 z" fill="none" stroke="black" stroke-width="0.1"></path></svg>');
border-style:solid;
border-image-slice:7.5% 10% 7.5% 15% fill;
padding:10px;
}
--></style>
<div class="fkds" style="width: 300px; height: 200px; border-width: 30px 40px 30px 60px;">テストその１</div>
以前に試した事のある、
画像を使ったborderの、画像の代わりにSVGを使おうと試みました。
一見、うまくいっているように見えるかもですが…中身のサイズと枠のサイズによって、中身が線にかぶってしまったりします^^;
（width: 300px; height: 200px; border-width: 30px 40px 30px 60px;の部分を都度調節すれば使えますが、サンプルとしてはあまりに使い勝手が悪いな、と^^;）
だいぶ色々試みてみましたが…いまだ未解決事件です。
しょうがない事なのかも…？
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
