どうも！LSSです！！
ふと思いつきで、radial-gradientとconic-gradientを重ねた「楕円形の吹き出し」を作ってみました。
吹き出しについては過去に、
【CSS】吹き出しCSSについて解説してみます！ - Little Strange Software
【CSS】色違い吹き出し - Little Strange Software
【CSS】CSSシェイプ…なんてものが存在するのを初めて知りました - Little Strange Software
でも試みていましたが、「楕円形」となると…見た目がナチュラルな反面、文字が飛び出してしまわないか？という心配もでてきたりします。
楕円形の吹き出し
中の文字は中央寄せにしていますが、はみ出さない保証はありません^^;
コード
<style>
.fukidashi{
text-align:center;
padding:13%;
background:
radial-gradient(farthest-side,#eecccc 99.9%,transparent 100%) 0% 0%/100% 100%
,conic-gradient(from 75deg at 0% 100%,#eecccc 15deg,transparent 15deg) 0% 100%/50% 50% no-repeat
;
}
</style>
<div class="fukidashi">こういう、楕円形のフキダシを考えてみました。<br />中の文字は中央寄せにしていますが、はみ出さない保証はありません^^;</div>
上記コードをコピーし、赤太字部分を書き換える事で使用できます。
また、
<div class="fukidashi">中略</div>
部分は同ページ内にいくつでも配置できます^^
また、色については、コード中２か所「#eecccc」と指定している部分を書き換えると色変更できます。
はみ出さないためのpadding設定
サンプルの文中にある通り、この吹き出しは「中の文章が楕円形からはみ出さない」という保証はありません^^;
コード中、
padding:13%;
とあるのが「文章の周囲の余白」で、この13%という数値を大きくすると文章表示部分が狭くなり、小さくすると広くなります。
もし、はみ出してしまうようでしたら、この値を調整してみてください。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^