title: Css Arrow with dashed border
body: <p>I'm Trying to get my <code>:before</code> arrow work nicely with my <code>div</code>, but i can't find a way to give the arrow </p>
  
  <ul>
  <li><code>background-color: transparent</code> </li>
  <li><code>dashed border</code>.</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/sYWyg.png" alt="enter image description here"></p>
  
  <p>CSS: </p>
  
  <pre><code>  position: absolute;
    top: 30px;
    right: 8px;
    display: inline-block;
    border-top: 12px dashed transparent;
    border-left: 12px dashed #b3b3b3;
    border-bottom: 12px dashed transparent;
    border-left-color: #b3b3b3;
    content: '';
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/KCqyk/" rel="nofollow noreferrer">JS FIDDLE</a></strong></p>