Html 如何在css中创建一个最长边上有长方体阴影的三角形

我目前正在设计一个android phonegap应用程序，我需要帮助尝试用某种盒子阴影重建三角形，但盒子阴影将只显示为正方形，而不是三角形。当我试图寻找答案时，我只能找到一个等边三角形，或者只在两侧，而不是最长的一侧

设计（隐藏某些部分）：

编辑：

用于当前原型的Pastebin链接（当前没有响应-设计用于1920像素的1080px）：

---

pastebin.com/GmYh9d9F

您需要的是

阴影过滤器：


.test{
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 100px 100px 100px；
边框颜色：透明透明#007bff透明；
过滤器：投影（0.04px#555）；
}
由于我们现在不提供代码编写，您需要提供一个最小的工作代码片段