Html 使用css创建的长方体阴影到三角形

我在下面使用CSS创建了一个三角形

CSS:

.triangle {
    border: inset 6px;
    content: "";
    display: block;
    height: 0;
    width: 0;
    border-color: transparent transparent red transparent;
    border-bottom-style: solid;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 89;
}

<div class="triangle">
</div>

HTML:

.triangle {
    border: inset 6px;
    content: "";
    display: block;
    height: 0;
    width: 0;
    border-color: transparent transparent red transparent;
    border-bottom-style: solid;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 89;
}

<div class="triangle">
</div>

在我的AngularJS项目中，这个三角形是在调用定义的下拉指令时创建的

问题是，我想给这个三角形和下拉式弹出框一个阴影。我能够将其应用于弹出窗口（本质上只是一个“ul”列表），但我正在与三角形作斗争。如何将长方体阴影应用于三角形？

.triangle{
位置：相对位置；
保证金：0；
框大小：边框框；
背景：红色；
盒影：0px 3px 3px 0 rgba（0,0,0,0.4）；
}
.三角形：：之后{
内容：“；
位置：绝对位置；
顶部：50px；
左：50px；
宽度：0；
身高：0；
框大小：边框框；
边框：6px纯黑；
边框颜色：透明的红色；
变换原点：0；
变换：旋转（-45度）；
盒影：-3px3px0RGBA（0,0,0,0.4）；
}

---

由于三角形实际上是一个hack（block元素的四个边框中有三个是透明的），所以box shadow属性将不会像预期的那样工作，因为它仍然将应用此“hack”的元素视为矩形，因此相应地应用了box shadow

其结果是

.triangle:之前{
边框：插图6px；
内容：“；
显示：块；
身高：0；
宽度：0；
边框颜色：透明红色透明；
边框底部样式：实心；
位置：绝对位置；
顶部：50px；
左：50px；
z指数：89；
盒影：0px 0px 2px 2px#AAA；
}

---

Nice work的可能复制品，使用旋转来突破当前CSS的限制。库多斯！