CSS speech bubble

CSS-speech-bubble.markdown

CSS speech bubble

CSS speech bubble w/ a text area, forked from example here http://css-tricks.com/examples/ShapesOfCSS/

A Pen by James Barnett on CodePen.

License.

index.html

<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>

style.css

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;
}