The CSS in this article has been refactored into a SASS mixin. See my updated article here.

Quick CSS 3 speech bubble

 

<h1 class="bordered-speech-bubble-down">
Quick CSS 3 speech bubble
</h1>

.bourbon-speech-bubble {
  background-color: $pale-green;
  border-bottom: 20px solid black;
  border-radius: 25px;
  width: 40%;
  margin: 2px auto;
  padding: 40px 10px;
  position: relative;
  &:after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    right: 5%;
    @include triangle(50px, black, up-left);
    @include transform(skewX(-15deg));
  }
}