Q:

Why I can't set border to arrow on tooltip div

I created tooltip div, and I want to make without background, I removed background color, but i hacve problem with removing color of arrow, if I remove i don't have arrow.
I was tried to set border:1px solid; for #talkbubble:before  but that's not working.
I want something like this http://i.imgur.com/GYcrzuo.jpg , but i can't solve.
JSFIDDLE: http://jsfiddle.net/e9f1b9xf/
HTML:
<div id="talkbubble">
</div>

CSS:
#talkbubble {
    margin-top:20px;
    margin-left:50px;
   width: 120px;
   height: 80px;
   background: none;
    border:1px solid;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

A:

try this

div{
  margin: 40px auto;
  border: 2px solid #333;
  width: 20px;
  height: 20px;
  position:relative;
  border-radius: 5px;
  border-left: 2px solid transparent
}
div:before{
  content:'';
  position: absolute;
  width: 4px;
  height:4px;
  border-left:2px solid #333;
  border-bottom: 2px solid #333;
  left: -4px;
  top: 7px;
  transform: rotate(45deg)
}
div:after {
  content: '';
  position: absolute;
  top: 0px;
  left: -1px;
  width: 2px;
  height: 7px;
  box-shadow: 0 13px #333;
  background: #333;
}
<div></div>

