title: Box shadow on css triangle
body: <p>I have a few list elements that has a css triangle arrow after them. I'd like to add <code>box-shadow</code> around the arrow, but can't figure out why my shadow isn't working. I have tried following other solutions, but those solutions use <code>::after</code> pseudo element to make the triangle, but my triangle is a separate <code>div</code>. any help is much appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#shippingsteps li {
    padding: 15px 15px 15px 35px;
    background: #ececec;
    float: left;
    display: block;
  }
  #shippingsteps li a {
    color: #4A4947
  }
  #shippingsteps li span {
    background: #7c7a7b;
    color: white;
  }
  #shippingsteps li.active {
    background: black;
    color: white;
    font-weight: bold
  }
  #shippingsteps li.active a {
    color: white;
  }
  #shippingsteps li.active span {
    background: #C60001;
    color: white;
    border-color: #C60001
  }
  #shippingsteps li::after {
    border: none;
  }
  #shippingsteps li .nav-arrow {
    border-color: transparent transparent transparent #ececec;
    border-style: solid;
    border-width: 31px 0 30px 20px;
    ;
    height: 0;
    position: absolute;
    right: -19px;
    top: 0;
    width: 0;
    z-index: 150;
  }
  #shippingsteps li .nav-arrow::after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent transparent transparent #ececec;
    border-image: none;
    border-style: solid;
    border-width: 31px 0 30px 20px;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4);
    content: "";
    position: absolute;
    right: 3px;
    top: -32px;
    transform: rotate(31deg);
    z-index: 100;
  }
  #shippingsteps li.active .nav-arrow {
    border-color: transparent transparent transparent #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="clearfix" id="shippingsteps"&gt;
    &lt;li class="first active"&gt;
      &lt;div class="nav-arrow"&gt;&lt;/div&gt;
      &lt;span&gt;1&lt;/span&gt;&lt;a data-target="checkout_login" href="#"&gt;
          Checkout Method &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="nav-arrow"&gt;&lt;/div&gt;
      &lt;span&gt;2&lt;/span&gt;&lt;a data-target="billing_shipping" href="#"&gt;
          Billing &amp;amp; Shipping&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="nav-arrow"&gt;&lt;/div&gt;
      &lt;span&gt;3&lt;/span&gt;&lt;a data-target="order_review" href="#"&gt;
          Your Order &amp;amp; Payment&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;span&gt;4&lt;/span&gt;&lt;a href="#"&gt;
          Confirmation&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>PS: Trying to put shadow around the grey triangles, the black one doesn't need any. </p>