css bubble arrow

markup.html

<div class="bubble">
    <div class="bubble-arrow">
        <div class="bubble-arrow-before"></div>
        <div class="bubble-arrow-after"></div>
    </div>
</div>

style.css

.bubble{
  margin: 50px;
  width: 150px;
  height: 50px;
  position: relative;
  background-color:#aaa;
  border:1px solid #600;
  border-radius: 5px;
}

.bubble-arrow{
  position: absolute;
  left: -9px;
  top: 25px;
}

.bubble-arrow-before, .bubble-arrow-after{
  position: absolute;
  display:block;
  height: 0;
  width: 0;
}

.bubble-arrow-after{
  border: 8px solid;
  border-color: transparent #aaa;
  top: -8px;
  border-left-width: 0;
  left: 1px;
}

.bubble-arrow-before{
  border: 9px solid;
  border-color: transparent #600;
  top: -9px;
  border-left-width: 0;
}