CSS で吹き出しを描画

CSS のお勉強、今回は下記のような吹き出しを CSS で描画したい

吹き出し付き

HTML はこれだけです

<div class="baloon">
  <p>吹き出し付き</p>
</div>

これに対し CSS コードはこれでできます

.baloon {
  position: relative;
  display: inline-block;
  margin: 1em 2em;
  padding: 0 1em;
  top: 50%;
  min-width: 10em;
  background:  #ffede0;
}
.baloon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -2em;
  margin-top: -0.5em;
  border: 0.5em solid transparent;
  border-right: 2em solid #ffede0;
}

::before は疑似要素というらしく、イメージとしては

<div class="baloon">
  <div class="baloon::before"/>
  <p>吹き出し付き</p>
</div>

こんな感じにインライン要素の直前に差し込むのと同じ効果があるとか

::after だとインライン要素の直後になります

この吹き出し、画像を一切使ってないので下記のように書き換えると

.baloon {
  position: relative;
  display: inline-block;
  margin: 1em 2em;
  padding: 0 1em;
  top: 50%;
  min-width: 10em;
  background:  #ffede0;
  border-radius: 1em; //追記
}
.baloon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -2em;
  margin-top: -0.5em;
  border: 0.5em solid transparent;
  border-right: 2em solid #ffede0;
}

吹き出しの角を丸めることができる！

角丸吹き出し付き

画像を使わない装飾はたくさん覚えたいですね