html - 我怎样才能给这个三 Angular 形添加阴影

Question

我试过为我的三 Angular 形添加阴影，但它不起作用，这太烦人了!这是我的代码:

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();
});

##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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

我一直在寻找解决方案很长时间，但找不到。这是运行该代码时发生的情况: https://gyazo.com/c890a79c547f5624c97abacc66104fc1 https://jsfiddle.net/Lec8862y/2/

Answer 1

HTML

<span class="triangle">▼</span>

CSS

span {
  display: inline-block;   
  transform: scaleX(8.5);
  color: lightgreen;
  text-shadow: 
    0 2px 2px rgba(255,255,255,0.7), 
    0 10px 4px rgba(0,0,0,0.5);
  font-size: 92px;
}
span:hover {
  transition: all 0.2s ease;
  transform: scaleX(9.5) translateY(4px);
  text-shadow:     
    0 1px 1px rgba(0,0,0,0.5);
}

body {
  padding: 20px;
  margin-left: 260px;
  margin-top: -40px
}

工作 fiddle :https://jsfiddle.net/rittamdebnath/drefg8r4/