如何在css中创建一个三角形，最长边有一个盒子阴影

Question

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

设计（隐藏部分）： https://i.stack.imgur.com/ysopX.png

编辑：

当前原型的Pastebin Link（目前没有响应 - 为1920px的1080px设计）：

pastebin.com/GmYh9d9F

Answer 1

您需要的是drop-shadow过滤器：

＆＃13;

＆＃13;

.test {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 100px 100px;
  border-color: transparent transparent #007bff transparent;
  filter: drop-shadow(0 0 4px #555);
}

＆＃13;

<div class="test"></div>

＆＃13;

＆＃13;

＆＃13;