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

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

.box {
  display: inline-block;
  width: 100px;
  height: 30px;
  background: $color-box;
}
.balloon {
  display: inline-block;
  position: relative;
  color: gray;
  border: 2px solid $color-balloon;
  padding: 0 .5em;
  border-radius: 4px;
  margin-left: 4px;
  &::before, &::after {
    position: absolute;
    content:"";
    border: 10px solid transparent;
    top: 8px;
    border-left-width: 0;
  }
  &::before {
    border-right-color: $color-balloon;
    left: -10px;
  }
  &::after {
    border-right-color: #fff;
    left: -7px;
    z-index: 10;
  }
}
@media screen and (max-width: 385px) {
  .box {
    width: 25px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.