How can I add a shadow to this triangle

I have tried adding a shadow to my triangle but it just wont work, this is so annoying! Heres my code:

style.css

.triangle-down {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 200px 0 100px;
  border-color: rgba(39, 39, 39, 1) transparent transparent transparent;
  box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5);
}

.triangle-down:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  background: rgba(39, 39, 39, 1);
  -webkit-transform: rotate(45deg);
  box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}

.par {
  position: absolute;
  top: 200%;
  width: 100%;
  height: 0%;
}


/* Arrows */

.arrows {
  width: 220px;
  height: 144px;
  position: absolute;
  left: 50%;
  top: 70%;
  margin-left: -76.5px;
}

.arrows path {
  stroke: white;
  fill: transparent;
  stroke-width: 1px;
}


/* Arrows */

.arrows-down {
  width: 220px;
  height: 144px;
  position: absolute;
  left: 50%;
  top: 70%;
  margin-left: -78.5px;
}

.arrows-down path {
  stroke: white;
  fill: transparent;
  stroke-width: 1px;
}

index.html

    <div class="par">
      <div class="triangle-down">
        <svg class="arrows-down" viewbox="0 0 102 102">
          <path class="a1" d="M0 20 L30 52 L60 20"></path>
        </svg>
      </div>
    </div>
    <!-- JQuery / JS -->
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
    function section_about() {
      $(".about").css("display", "inline-block");
      $(".about").animate({opacity:"1"}, {duration: 1000, queue: false});

      window.location.hash = "/About Us/";
    }

 function triangle_sizer() {
    $(".triangle-up").css("border-left-width", jQuery(window).width()/2);
    $(".triangle-up").css("border-right-width", jQuery(window).width()/2);
    $(".triangle-up").css("top", jQuery(window).height()-125);

    $(".triangle-down").css("border-left-width", jQuery(window).width()/2);
    $(".triangle-down").css("border-right-width", jQuery(window).width()/2);
    $(".triangle-down").css("top", jQuery(window).height()-125);
}

triangle_sizer();

jQuery(window).resize(function() {
     triangle_sizer();
  });
    </script>

I have been searching for a solution for a long time and cant find one. This is what happens when that code is ran: https://gyazo.com/c890a79c547f5624c97abacc66104fc1 https://jsfiddle.net/Lec8862y/2/