9ml

吹き出しデザイン

参考サイト

CSS Generator　の#50

（-webkit-maskを利用して滑らかな吹き出しを表現）

20+ CSS Speech Bubbles

滑らかな吹き出し

<p>ここに吹き出しのテキストを入れます</p>
p {
  --s: 1em; /* triangle size */
  --r: 1em; /* the radius */
  padding: 1em;
  border: var(--s) solid #0000;
  border-radius: 24px;
  border-bottom-right-radius: 0;
  background: border-box linear-gradient(45deg, var(--green), var(--lightgreen));
  -webkit-mask:
    radial-gradient(100% 100% at 100% 0,#0000 99%,#000 102%) 
      100% calc(100% - var(--s))/var(--s) var(--s) no-repeat border-box,
    linear-gradient(#000 0 0) padding-box;
}

・backgroundにborder-boxを指定することで、paddingの領域まで背景色を塗ります

・-webkit-maskで右下の突き出た部分をつくります

・radial-gradient(100% 100% at 100% 0,#0000 99%,#000 102%)　では

サイズをwidth100% height100%とし、

円形グラデーションの起点を100% 0 （右上）とし、

0％から99％までを透明#0000、99％から102％までを黒色#000としています。

・次の100% calc(100% – var(–s))/var(–s) var(–s) no-repeat border-box,では

グラデーションの配置をcalc(100% – var(–s))/var(–s) var(–s) 　とし、

繰り返しをno-repeatにしています。

ホームに戻る