<div class="balloon"><p>balloon top sample</p></div>
<div class="box"></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-bottom: 9px;
  &::before, &::after {
    position: absolute;
    content:"";
    border: 10px solid transparent;
    border-bottom-width: 0;
    left: 30px;
  }
  &:before {
    border-top-color: $color-balloon;
    top: 56px;
  }
  &:after {
    border-top-color: #fff;
    top: 53px;
    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.