CSSで吹き出しを表現する

1. このページの目的

CSSで吹き出しを表現する。

2. デモ

3. コード

HTML

<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>

CSS

.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;
}