Skip to content

Instantly share code, notes, and snippets.

@barnettjw
Created April 10, 2015 12:42
Show Gist options
  • Save barnettjw/04fb66002f674bca6e10 to your computer and use it in GitHub Desktop.
Save barnettjw/04fb66002f674bca6e10 to your computer and use it in GitHub Desktop.
CSS speech bubble
<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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment