CSSだけで吹き出しを作成する方法です。
吹き出しのイメージ
HTML
|
1 2 3 |
<p class="balloon">これは吹き出しです</p> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.balloon{ display:inline-block; background:#8ccfca; color:#FFF; border-radius:100vh; padding:1.5em 2em; min-width: 300px; margin:40px auto; text-align:center; position:relative; } /* 吹き出しのしっぽ部分 */ .balloon::after{ content:""; position:absolute; background:#8ccfca; left:3em; /* 位置 */ bottom:-28px; /* 縦の位置 */ width:56px; height:40px; clip-path:polygon(0 0, 100% 0, 0 100%); /* 三角形 */ } |
