A Pen by Jon Catmull.

_speechbubblepointer.scss

@mixin bubblepointer($side,$size: 1,$bottom: 25%,$foreground: inherit,$background: #fff) {
  @if $side == 'left' {
    z-index: -1;
    position: absolute;
    height: 0;
    padding-bottom: (7%*$size);
    width: (13%*$size);
    bottom: $bottom;
    right: 100%;
    background: $foreground;
    @include border-bottom-left-radius(100% 60%);
    &:before {
      content: '';
      background: #fff;
      position: absolute;
      width: 150%;
      height: 150%;
      right: -17%;
      bottom: 50%;
      @include transform(rotate(-25deg));
      @include border-bottom-left-radius(100% 60%);
    }
  } @elseif $side == 'right' {
    z-index: -1;
    position: absolute;
    height: 0;
    padding-bottom: (7%*$size);
    width: (13%*$size);
    bottom: $bottom;
    left: 100%;
    background: $foreground;
    @include border-bottom-right-radius(100% 60%);
    &:before {
      content: '';
      background: #fff;
      position: absolute;
      width: 150%;
      height: 150%;
      left: -17%;
      bottom: 50%;
      @include transform(rotate(25deg));
      @include border-bottom-right-radius(100% 60%);
    }
  }
}

index.html

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>

<div id="quote">
  <p>Quote text in here...</p>
  <div class="pointer"></div>
</div>

speech-bubble-pointer-mixin.markdown

speech bubble pointer mixin

Create a speech bubble with a curved pointer with 1 additional div.

A Pen by Jon Catmull on CodePen.

License.

style.scss

@import "compass/css3", "speechbubblepointer";
* {
  box-sizing: border-box;
}


#quote {
  color: #fff;
  font-size: 24px;
  font-family: 'open sans', sans serif;
  margin: 200px;
  padding: 20px 30px;
  width: 400px;
  height: 200px;
  background: skyblue;
  position: relative;
  @include border-radius(30px);
  .pointer {
    @include bubblepointer(right,1.2);
  }
}