吹き出し、コメントのアイコン

<div class="dli-chat"></div>

.dli-chat {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  position: relative;
  width: 1.06667em;
  height: 0.8em;
  background: #fff;
  border: 0.1em solid currentColor;
  border-radius: 0.2em;
  box-sizing: content-box;
}

.dli-chat::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 10%;
  width: 0.16em;
  height: 0.16em;
  background: inherit;
  border: 0.1em solid currentColor;
  border-top-color: transparent;
  border-right-color: transparent;
  border-right-width: 0.14142em;
  border-bottom-width: 0.14142em;
  box-sizing: content-box;
  border-radius: 0 0 0 0.1em;
  transform: skewY(-45deg);
  transform-origin: left top;
}