Speech Bubble Arrows

A cool speech bubble using only CSS

HTML

<div class="bubble" style="border-color: black;">
  <h3>Bubble Title</h3>
  <p>How much text can you actually fit inside of one of these guys? Well... As much as you want.</p>
</div>

<div class="bubble" style="box-shadow:none;background: green; border-color: green;">
  <p>Chris Coyier's <a href="http://css-tricks.com/speech-bubble-arrows-that-inherit-parent-color/" target="_blank">Speech Bubble Arrow</a> CSS Trick.</p>
</div>

CSS

@media screen {
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
}
.bubble {
  margin: 50px;
  padding: 20px;
  position: relative;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8em;
  background: rgb(125,126,125);
  background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(0,0,0,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(0,0,0,1)));
  background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(0,0,0,1) 100%);
  background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(0,0,0,1) 100%);
  background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(0,0,0,1) 100%);
  background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(0,0,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#000000',GradientType=0 );
  color:#fff;
  border-radius:5px;
  box-shadow:inset 0 0 20px #000;
}
.bubble:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  border-top: 15px solid blue;
  border-top-color: inherit; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent; 
}
.bubble h3 {
  margin:0;
  padding:0;
  font-weight:normal;
  font-size:1.55em;
  text-shadow:1px 1px 1px #000
}
.bubble a {color:yellow;text-decoration:none;border-bottom:1px dotted #000}
.bubble a:hover {color:#fff}
.bubble p {margin:0 0 5px 0;padding:0;}