どうも！LSSです！！
昨日、少しこぼしましたが、 border-image でやってみたい事があり、radial-gradientとの組み合わせでなんとかできないか、と試みていましたがなかなか思うように行かず^^;
で、「コードで仮想的に画像を作る」方法としては、インラインSVGを用いる方法があり、
で background-image になら当ててみた事がありました。
それを border-image に応用すると、gradientゆえに苦労する部分が緩和されるのでは？と思い、再び挑戦してみました。
雲型の枠 挑戦中
ちょっとモクモク感が足りないかなぁ？
元々のイメージから考える必要がありそう。
こちらは半円がそのまま出ていますが、これだとちょっとモクモクが強すぎる？
調整が必要ぽい。
ちょっと調整を試みてみました。
割としっくりくるかも。
コード
雲型の枠 その１
<style><!--
.mokumoku1{
border:30px solid transparent;
border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewbox="0 0 90 90" stroke="none" fill="%23ddddff"><circle cx="30" cy="45" r="30"/><circle cx="60" cy="45" r="30"/><circle cx="45" cy="30" r="30"/><circle cx="45" cy="60" r="30"/></svg>') 30 fill/30px round;
}
--></style>
<div class="mokumoku1">雲型の枠 その１。<br /><br />ちょっとモクモク感が足りないかなぁ？<br />元々のイメージから考える必要がありそう。</div>
雲型の枠 その２
<style><!--
.mokumoku2{
border:30px solid transparent;
border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewbox="0 0 60 60" stroke="none" fill="%23ddddff"><circle cx="15" cy="30" r="15"/><circle cx="45" cy="30" r="15"/><circle cx="30" cy="15" r="15"/><circle cx="30" cy="45" r="15"/></svg>') 15 fill/15px round;
}
--></style>
<div class="mokumoku2">雲型の枠 その２。<br /><br />こちらは半円がそのまま出ていますが、これだとちょっとモクモクが強すぎる？<br />調整が必要ぽい。</div>
雲型の枠 その３
<style><!--
.mokumoku3{
border:30px solid transparent;
border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewbox="0 0 60 60" stroke="none" fill="%23ddddff"><circle cx="22" cy="30" r="16"/><circle cx="38" cy="30" r="16"/><circle cx="30" cy="22" r="16"/><circle cx="30" cy="38" r="16"/></svg>') 15 fill/15px round;
}
--></style>
<div class="mokumoku3">雲型の枠 その３。<br /><br />ちょっと調整を試みてみました。<br />割としっくりくるかも。</div>
あとがき
「その３」あたりで、思っていたものに近づいてきた感じがあります^^
どうもうまく作れなかった要因として、gradient系とborder-imageの相性以前の問題として、「自分の作ろうとしていたイメージ（その１やその２）」では、画像として思った感じにならない、という根本的な問題もあったようですｗ
ちなみに、コードはどれも「４つの円」を含む画像をSVGで生成していますが、「%23ddddff」とあるのは「#ddddff」の色コードです。
（url形式でSVGを使う場合は#を%23に置き換える必要があります。）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
