title: Pure CSS triangle with semi-transparent border. Possible?
body: <p>Is it possible to draw an arrow that has semi-transparent border around it just using css?
  <img src="https://i.stack.imgur.com/0UHSm.gif" alt="enter image description here"></p>
  
  <p>Heres a fiddle of my effort so far:
  <a href="http://jsfiddle.net/calebo/fBW4u/" rel="nofollow noreferrer">http://jsfiddle.net/calebo/fBW4u/</a></p>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.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; 
  }
  </code></pre>