【CSS】吹き出しをつくる

<div class="arrow_bottom">ふきだしです。</div>

/* ---------- 01 吹き出し（下） ---------- */
.arrow_bottom {
  position: relative;
  display: inline-block;
  background: #fff;
  border: 4px solid #2b2a27;
  padding: 30px;
  margin: 0;
}
.arrow_bottom::after, .arrow_bottom::before {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  border: solid transparent;
}
.arrow_bottom::after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 14px;
  margin-left: -14px;
}
.arrow_bottom::before {
  border-color: rgba(43, 42, 39, 0);
  border-top-color: #2b2a27;
  border-width: 20px;
  margin-left: -20px;
}

<div class="arrow_top">ふきだしです。</div>

/* ---------- 02 吹き出し（上） ---------- */
.arrow_top {
  position: relative;
  display: inline-block;
  background: #fff;
  border: 4px solid #2b2a27;
  padding: 30px;
  margin: 0;
}
.arrow_top::after, .arrow_top::before {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  bottom: 100%;
  left: 50%;
  border: solid transparent;
}
.arrow_top::after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 14px;
  margin-left: -14px;
}
.arrow_top::before {
  border-color: rgba(43, 42, 39, 0);
  border-bottom-color: #2b2a27;
  border-width: 20px;
  margin-left: -20px;
}

<div class="arrow_left">ふきだしです。</div>

/* ---------- 03 吹き出し（左） ---------- */
.arrow_left {
  position: relative;
  display: inline-block;
  background: #fff;
  border: 4px solid #2b2a27;
  padding: 30px;
  margin: 0;
}
.arrow_left::after, .arrow_left::before {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  right: 100%;
  top: 50%;
  border: solid transparent;
}
.arrow_left::after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 14px;
  margin-top: -14px;
}
.arrow_left::before {
  border-color: rgba(43, 42, 39, 0);
  border-right-color: #2b2a27;
  border-width: 20px;
  margin-top: -20px;
}

<div class="arrow_right">ふきだしです。</div>

/* ---------- 04 吹き出し（右） ---------- */
.arrow_right {
  position: relative;
  display: inline-block;
  background: #fff;
  border: 4px solid #2b2a27;
  padding: 30px;
  margin: 0;
}
.arrow_right::after, .arrow_right::before {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  left: 100%;
  top: 50%;
  border: solid transparent;
}
.arrow_right::after {
  border-color: rgba(255, 255, 255, 0);
  border-left-color: #fff;
  border-width: 14px;
  margin-top: -14px;
}
.arrow_right::before {
  border-color: rgba(43, 42, 39, 0);
  border-left-color: #2b2a27;
  border-width: 20px;
  margin-top: -20px;
}