Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】楕円形の吹き出し【小ネタ】

f:id:little_strange:20220126234216p:plain

 

 どうも!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>

部分は同ページ内にいくつでも配置できます^^

 

また、色については、コード中2か所「#eecccc」と指定している部分を書き換えると色変更できます。

 

 

はみ出さないためのpadding設定

サンプルの文中にある通り、この吹き出しは「中の文章が楕円形からはみ出さない」という保証はありません^^;

 

コード中、

padding:13%;

とあるのが「文章の周囲の余白」で、この13%という数値を大きくすると文章表示部分が狭くなり、小さくすると広くなります。

もし、はみ出してしまうようでしたら、この値を調整してみてください。

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^