A CodePen by Laidlaw. Simple Word Bubble mixin - This handles the color, size and rotation of the word bubble's stem.

index.html

<div class="container">
  <img src="http://placekitten.com/g/200/300" alt="" />
  <div class="circle">
    Here is some text
  </div>
  <div class="circle2">
    I'm going to die alone. :(
  </div>
</div>

style.scss

@import "compass";
@import 
  'compass/css3',
  'compass/css3/border-radius',
  'compass/css3/transform',
  'compass/css3/transition';

@mixin circle($background, $rotate:0deg, $size:100% ) {
	width: $size;
	height: $size;
  @include box-sizing(border-box); 
  padding: ($size / 5);
  z-index:3;
  background:$background;
	@include border-radius(50%);
  position:relative;
  &:after {
   @include transform-origin(0%, 0%);
   @include transform(rotate($rotate));
   z-index:-1;
   width:50%;
   height:50%;
   position: absolute;
   background: $background;
   @include background-image(linear-gradient(top left, $background 70%, ($background - 20) 95%));
   left:50%;
   bottom:0;
   content: "";
  }
}

.circle {
  @include circle(green, -15deg, 200px); 
  position:absolute;
  top:-30px;
  left:-60px;
}
.circle2 {
  @include circle(rgb(207, 169, 14), 150deg, 110px); 
  position:absolute;
  top:100px;
  right:20%;

}
img {position:absolute; left:25%;}
.container {
  color:white;
  font-family:sans-serif;
  padding:50px;
  position:relative;
  margin: 50px auto;
  width:400px;
}