HTMLとCSSだけで吹き出しをデザインする方法。
HTML側
<div class="sample">吹き出し</div>
CSS側
三角の位置はbeforeの一部を変更することで移動できる。
.sample{
position: relative;
padding: 20px;
}
/* 右 */
.sample::before{
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
right: -15px;
top: 20px;
border-left: 15px solid #fff3ad;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
/* 下 */
.sample::before{
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
left: 20px;
bottom: -15px;
border-top: 15px solid #fff3ad;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
}
/* 左に */
.sample::before{
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
left: -15px;
top: 20px;
border-right: 15px solid #fff3ad;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
縁取りの吹き出しを作る場合には、:afterに同じ大きさの三角を書き、下向きの三角であれば少し上方向にずらせば作成可能。