当div位于顶部时，如何防止图像的css-filter-drop-shadow出现？

Question

我在一个向下箭头图像的顶部放置一个矩形div，这样只有一个三角形的部分可以窥视（我通过将矩形的z-index设置为100并将箭头的z-index设置为-100来实现）。当我向下箭头图像添加阴影时，我预计只会出现三角形的阴影，但是应该隐藏在矩形div下面的向下箭头的阴影的其余部分也会出现（参见图像）下文）。

#arrowDown {
position: relative;
z-index: -100; /* z-index of rectangular div is 100 */
width: 88.5839416px;
height: 82px;
margin: -50px 100px;
bottom: 89.2px;

background: url('../img/arrowDown.png') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

-webkit-filter: drop-shadow(0 0 5px #FFFFFF);
-moz-filter: drop-shadow(0 0 5px #FFFFFF);
-o-filter: drop-shadow(0 0 5px #FFFFFF);
filter: drop-shadow(0 0 5px #FFFFFF);
}