吹き出しボックス
//scss
text{
position: relative;
width: 340px;
box-sizing: border-box;
&:after{
content: "";
display: block;
width: 100%;
height: 100%;
background: #bfe0f7;
bottom: -6px;
right: -6px;
position: absolute;
z-index: 1;
}
span{
font-size: 4px;
line-height: (23/14);
display: block;
background: #fff;
padding: 15px 20px;
position: relative;
z-index: 2;
&:after{
content: "";
position: absolute;
right: 0;
top: -20px;
left: 0;
width: 0px;
height: 0px;
margin: auto;
border-style: solid;
border-color: transparent transparent #fff;
border-width: 0 11px 20px 11px;
}
}
}
<p class="text">
<span>テキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー</span>
</p>
この記事が気に入ったらサポートをしてみませんか?