.bubble.left I JUST CAN'T BELIVE IT.
  br
  | THIS BUBBLE IS AWESOME
br
.bubble.right YEAH I KNOW..
  br
  | I HEARD THIS GUY DID IT WITH PURE CSS  
br  
.bubble.left TRUST ME, THIS IS LIKE SOOOOOO AMAZING.
  br
  | HE TOLD ME HE USED 3 LAYERS OF BOX-SHADOW 
  br
  | TO CREATE THE TAIL. 
  br
  | AND EVERYTHING IS DONE WITH JUST ONE ELEMENT
br
.bubble.think.left WAIT UNTIL HE FINDS OUT THAT HE CAN USE THINK BUBBLES.
br
.bubble.right WELL, THAT SEEMS SMART.
  br
  | SO THIS BASICALLY WORKS IN ANY BROWSER, IE9 AND LATER?
br
.bubble.left IT SURE DOES.
  br
  | THERE'S NOTHING TOO SPECIAL ABOUT THIS.
br
.bubble.right NIIIICEEE.
  br
  | I'LL LIKE SOOOO USE IT ON MY NEXT PROJECT.
  br
  | WHAAAAA LIKE... RESIZE THE BROWSER DUDE. 
  br 
  | THIS IS FULLY FLUID.
br
.bubble.left GROW UP MAN.
  br
  | NOT FLUID OR RESPONSIVE IS OLDSCHOOL AND STUPID.
br
.bubble.think.left OH HOW I HATE THOSE NOOBS.
br
.bubble.think.right YOU DON'T HAVE TO BE SO ARROGANT ABOUT IT.
  br 
  | UHH..? I CAN THINK TOO?
br
.bubble.right SO I GUESS YOU FOUND OUT ABOUT THE THINK BUBBLES TOO?
br
.bubble.think.left HA... TOLD YA THE THINK BUBBLES WOULD AMAZE HIM.
br
.bubble.left DUHH... WHAT'S A BUBBLE WITHOUT A THINK-OPTION?
br
.bubble.yell.right QUIT BEING SO FRIGGIN ARROGANT DUDE!!!
  br
  | YOU DON'T GOTTA BE ACTIN' LIKE YOU KNOW EVERYTHING
br
.bubble.left UHH? HOW DID YOU DO THAT BUBBLE?
br
.bubble.yell.right OH, I BET YOU'D LIKE TO KNOW... MR. KNOW-IT-ALL
  br
  | I AIN'T TELLIN' YA, THAT'S FOR SURE!
br
.bubble.think.right WHAT A NOOB...

@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);
body {
  background: #af9;
}

.bubble {
  display: inline-block;
  
  position: relative;
  padding: 30px 40px;
  border-radius: 10px;
  border: 3px solid black;
  background: white;
  font-family: "Permanent Marker";
  clear: both;
  
   &:before {
     content: '';
     position: absolute;
     bottom: -50px;
     height: 50px;
     width: 90px;
   }
  
  &.left {
    float: left;
    margin: 10px 100px 60px 10px;
    &:before {
      border-radius: 0 0 100%;     
      box-shadow: 
        -2px -2px 0 0 #000 inset,
        -23px 0 0 0 #fff inset,
        -25px -2px 0 0 #000 inset;
      left: 0;
    }
       
  }
  &.right {
    float: right;
    margin: 10px 10px 60px 100px;
    &:before {
      border-radius: 0 0 0 100%;     
      box-shadow: 
        2px -2px 0 0 #000 inset,
        23px 0 0 0 #fff inset,
        25px -2px 0 0 #000 inset;
      right: 0;
    }   
  }
  
  &.think {
    &:before {
      height: 3px;
      width: 3px;
      bottom: -20px;
      border-radius: 100%;
      background: #fff;
    }
    &.left:before {
      left: 50px;
      box-shadow: 
        0 0 0 7px white,
        0 0 0 10px black,
        -20px 15px 0 5px white,
        -20px 15px 0 8px black,
        -40px 20px 0 2px white,
        -40px 20px 0 5px black;
    }
    &.right:before {
      right: 50px;
      box-shadow: 
        0 0 0 7px white,
        0 0 0 10px black,
        20px 15px 0 5px white,
        20px 15px 0 8px black,
        40px 20px 0 2px white,
        40px 20px 0 5px black;
    }
  }
  &.yell { 
    &:before {
      height: 0px;
      width: 0px;
      bottom: -8px; 
      border-radius: 0;
      background: #fff;
    }
    &:after {
      content: '';
      position: absolute;
      bottom: -41px;
      height: 20px;
      width: 59px;
    }
    &.left {
      &:before {
        transform: skew(-45deg);
        left: 50px;
        box-shadow: 
          //0 0 0 7px white,
          0 -3px 0 5px white,
          0 0 0 5px white,
          0 8px 0 5px white,
          8px 8px 0 5px white,
          16px 8px 0 5px white,
          24px 8px 0 5px white, 

          0 0 0 8px black,
          0 8px 0 8px black,
          8px 8px 0 8px black,
          16px 8px 0 8px black,
          24px 8px 0 8px black;
      }
      &:after {
        border-radius: 0 0 60%;     
        transform: skew(-45deg);
        box-shadow: 
          -3px -2px 0 0 #000 inset,
          -14px 0 0 0 #fff inset,
          -17px -2px 0 0 #000 inset;
        left: 0;
      }
    }
    &.right {
      &:before {
        transform: skew(45deg);
        right: 50px;
        box-shadow: 
          0 -3px 0 5px white,
          0 0 0 5px white,
          0 8px 0 5px white,
          -8px 8px 0 5px white,
          -16px 8px 0 5px white,
          -24px 8px 0 5px white, 
          0 0 0 8px black,
          0 8px 0 8px black,
          -8px 8px 0 8px black,
          -16px 8px 0 8px black,
          -24px 8px 0 8px black;
      }
      &:after {
      border-radius: 0 0 0 60%;     
        transform: skew(45deg);
        box-shadow: 
          3px -2px 0 0 #000 inset,
          14px 0 0 0 #fff inset,
          17px -2px 0 0 #000 inset;
        right: 0;
      }
    }
  }
}