title: CSS: Triangle with a dip in the middle
body: <p>I'm wanting to give <a href="http://jsbin.com/dusafayasu/1/edit" rel="nofollow noreferrer">this triangle</a> a dip in the middle, and I do not want any extra HTML.</p>
  
  <pre><code>&lt;span class="dropdown"&gt;dropdown&lt;/span&gt;
  
  .dropdown:after
  {
      display: inline-block;
  
      margin-left: 4px;
  
      content: '';
  
      border-top: 5px solid rgba(0,0,0,.2);
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
  }
  </code></pre>
  
  <p>Desired result</p>
  
  <p><img src="https://i.stack.imgur.com/lZlZ5.png" alt="http://cdn.flaticon.com/png/256/32195.png"></p>
  
  <p>How may I do this?</p>