1. このページの目的
CSSで吹き出しを表現する。
2. デモ
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
3. コード
<div class="bubble">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
.bubble {
position: relative;
display: inline-block;
margin-left: .8em;
padding: 0 1em;
border-radius: .5em;
border: 1px solid var(--bubble-border-color);
background-color: var(--bubble-color);
}
.bubble:before {
content: "";
position: absolute;
top: 50%;
left: -30px;
margin-top: -20px;
border: 20px solid transparent;
border-right: 20px solid var(--bubble-color);
z-index: 2;
}
.bubble:after {
content: "";
position: absolute;
top: 50%;
left: -22px;
margin-top: -11px;
border: 11px solid transparent;
border-right: 11px solid var(--bubble-border-color);
z-index: 1;
}