html - 当 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);
}