title: Box shadow for css generated arrow
body: <p>I'm using the following code for creating <strong>up</strong> arrow in css:</p>
  
  <pre><code>border-bottom: 10px solid red;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent
  </code></pre>
  
  <p>I also want to apply a <code>box-shadow</code> only to the arrow not the rectangular box around it (<a href="https://jsfiddle.net/j6qsekcc/1/" rel="nofollow">FIDDLE</a>). Is it possible this way?</p>
  
  <p><strong>NOTE:-</strong> I don't want to use any image, it should be with CSS.</p>