<div class="talkbubble">
  <textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique diam vel libero lobortis, in faucibus elit vulputate. Maecenas lacinia, sapien sit amet auctor pulvinar, nisl leo tincidunt nibh</textarea>
</div>
body { 
  margin: 50px; 
  color: #333; 
  font-family: Verdana, sans-serif;
  font-size: 16px;
}

.talkbubble {
  position: relative;
  width: 300px;
  height: 125px;
  
  padding: 10px;
  border-radius: 5px;
  border: solid lightblue;
  background: lightblue;
}

.talkbubble:before {
  content:"";
  position: absolute;
  right: 100%;
  top: 26px;
  width: 0;
  height: 0;
  
  border-top: 13px solid transparent;
  border-right: 26px solid lightblue;
  border-bottom: 13px solid transparent;
}

.talkbubble textarea {
  position: inherit;
  width: inherit;
  height: inherit;
  background: inherit;
  
  margin: 0;
  padding: 0;
  
  border: none;
  resize: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js