<div class="inliner"></div>
<div class="inlined bubbles">
  <div class="bubble-green">
    Some text goes here
  </div>
  
  <div class="bubble-yellow">
    Some text goes here
  </div>
  
  <div class="bubble-orange">
    Some text goes here
  </div>
  
  <div class="bubble-red">
    Some text goes here
  </div>
  
  <div class="bubble-purple">
    Some text goes here
  </div>
  
  <div class="bubble-pink">
    Some text goes here
  </div>
  
  <div class="bubble-black">
    Some text goes here
  </div>
</div>

@import "compass/css3";

$green  : 'green',  #99B15B;
$yellow : 'yellow', #ded42f;
$orange : 'orange', #f98d39;
$red    : 'red',    #f70908;
$pink   : 'pink',   #d43467;
$purple : 'purple', #815796;
$dark   : 'black',  #2d2d2d;

$tints: $green, $yellow, $orange, $red, $pink, $purple, $dark;

$tint    : nth($tints, 1);
$colour  : nth($tint, 2);
$colour2 : darken($colour, 10%);

html, body {
  height: 100%;
}

body {
  font      : 16px Arial;
  text-align: center;
}

.inliner {
  height: 100%;
}

.inliner,
.inliner + .inlined {
  display        : inline-block;
  vertical-align : middle;
}

.bubbles {
  width : 400px;
  margin: auto;
}

%bubble {
  @include border-radius(7px 7px 10px 10px);
  
  position      : relative;
  padding       : 10px;
  background    : $colour;
  border-bottom : 5px solid $colour2;
    
  &:before,
  &:after {
    content  : "";
    position : absolute;
    left     : 60%;
    top      : 100%;
    
    border-top    : 14px solid $colour;
    border-bottom : none;
    border-left   : 17px solid transparent;
    border-right  : 10px solid transparent;
  }
  
  &:before {
    padding-top      : 10px;
    border-top-color : $colour2;
  }
  
  &:after {
    margin-top: -5px;
  }
}

%demo {
  display: inline-block;
  margin : 10px;
}

@each $tint in $tints {
  $_cls : nth($tint, 1);
  $_c1  : nth($tint, 2);
  $_c2  : darken($_c1, 10%);
  $_c3  : darken($_c1, 15%);
  
  .bubble-#{$_cls} {
    @extend %bubble;
    @extend %demo;
    
    @include text-shadow(
      0 1px 1px rgba(#fff, 0.5)
    );
        
    background          : $_c1;
    border-bottom-color : $_c2;
    color               : transparent;
    color               : $_c3;
    
    &:before {
      border-top-color : $_c2;
    }
    
    &:after {
      border-top-color : $_c1;
    }
  }
}