最終更新：
通常のタイプ。
これはサンプル文章です
<p class="commentBalloon">これはサンプル文章です</p>
.commentBalloon{
position: relative;
margin: 16px;
padding: 16px;
border: 5px solid #d0d0d0;
background-color:#f0f0f0;
display:inline-block;
}
.commentBalloon:before {
position: absolute;
bottom: -20px;
left: 9px;
content: "";
width: 0;
height: 0;
border-bottom: 16px solid transparent;
border-left: 16px solid #d0d0d0;
}
上記を元にした応用編。
考えている内容を表現する時の吹き出し。
これはサンプル文章です
<p class="commentBubble">これはサンプル文章です</p>
.commentBubble{
position: relative;
margin: 16px;
padding: 16px;
border: 5px solid #d0d0d0;
background-color:#f0f0f0;
display:inline-block;
border-radius:30px;
z-index:3;
}
.commentBubble:before {
position: absolute;
bottom: -20px;
left: 6px;
content: "";
width: 18px;
height: 12px;
border: 4px solid #d0d0d0;
background-color:#f0f0f0;
border-radius:15px;
z-index:2;
}
.commentBubble:after {
position: absolute;
bottom: -32px;
left: -2px;
content: "";
width: 9px;
height: 9px;
border: 4px solid #d0d0d0;
background-color:#f0f0f0;
border-radius:9px;
z-index:1;
}