title: How to make an arrow pointing down with CSS (with gradient)?
body: <p>Through some examples I found online, I figured out to make an "up" HTML arrow using</p>
  
  <pre><code>.arrow:after {
    height: 100px;
    width: 100px;
    display: block;
    content: '';
  }
  
  .upArrow:after {
    background: linear-gradient(60deg, transparent 63%, #fff 63%), linear-gradient(-60deg, transparent 63%, #fff 63%), linear-gradient(to bottom, #ccc, #000);
  }
  </code></pre>
  
  <p>My quesiton is, how do I make the down arrow? 
   My Fiddle illustrating this is here -- <a href="https://jsfiddle.net/hsfm42mb/" rel="nofollow noreferrer">https://jsfiddle.net/hsfm42mb/</a> .</p>