《CSS》吹き出しとしっぽにまとめて影をつける
公開日:2025年07月15日 最終更新日:2025年7月16日
filter:drop-shadow
を使うと吹き出しとしっぽに自然な影をまとめてかけることができます。
DEMO
吹き出しの内容がここに入ります。
HTML
<div class="bubble">吹き出しの内容がここに入ります。</div>
CSS
.bubble {
background: #fff;
border-radius: 10px;
display: inline-block;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, .2));
padding: 20px;
position: relative;
}
.bubble::before {
border-color: #fff transparent transparent transparent;
border-style: solid;
border-width: 10px 10px 0 10px;
bottom: -10px;
content: '';
height: 0;
left: 20px;
position: absolute;
width: 0;
}