¿Es posible dibujar una flecha que tenga un borde semitransparente a su alrededor simplemente usando CSS? @

Heres un violín de mi esfuerzo hasta ahora:http: //jsfiddle.net/calebo/fBW4u

CSS:

.ui-overlay {
  padding-bottom: 10px;   
  position: relative;
}
.ui-overlay-content { 
  background: #999;
  color: #000;
  padding: 8px;
  border-radius: 4px; 
  border: 5px solid rgba(0, 0, 0, 0.2); 
  background-clip: padding-box; 
  height: 100px;
  width: 200px;
}
.arrow {
  border-color: #999 transparent transparent; 
  border-style: solid; 
  border-width: 10px 10px 0; 
  bottom: 5px; 
  left: 15px; 
  width: 0;
  height: 0;
  position: absolute;
  overflow: hidden; 
}