<div class="box"></div>
<div class="balloon"><p>balloon bottom sample</p></div>
$color-blue: #82D7FF;
$color-pink: #FF82A5;

$color-box: rgba($color-pink, .9);
$color-balloon: rgba($color-blue, .9);

.box {
  width: 100px;
  height: 30px;
  background: $color-box;
}
.balloon {
  display: table;
  position: relative;
  color: gray;
  border: 2px solid $color-balloon;
  padding: 0 .5em;
  border-radius: 4px;
  margin-top: 9px;
  &::before, &::after {
    position: absolute;
    content:"";
    border: 10px solid transparent;
    border-top-width: 0;
    left: 30px;
  }
  &::before {
    border-bottom-color: $color-balloon;
    top: -10px;
  }
  &::after {
    border-bottom-color: #fff;
    top: -7px;
    z-index: 1;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.