<div class="chat-bubble">
  麥誠直播 #6
</div>
body {
  display: grid;
  place-items: center;
  min-height: 95vh;
  font-size: 2em;
}
.chat-bubble {
  background: gold;
  padding: 1em;
  border-radius: 5em;
  position: relative;
  
  box-shadow: 0 .2em goldenrod;
}

.chat-bubble::after {
  --triangle-size: .6em;
  content:'';
  border: var(--triangle-size) solid transparent;
  border-top-color: gold;
  position: absolute;
  bottom: calc(var(--triangle-size) * -2 + 2px);
  left: calc(50% - var(--triangle-size));  
}

.chat-bubble::before {
  --triangle-size: .6em;
  content:'';
  border: var(--triangle-size) solid transparent;
  border-top-color: goldenrod;
  position: absolute;
  bottom: calc(var(--triangle-size) * -2 + 2px - .2em);
  left: calc(50% - var(--triangle-size));  
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.