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

Question

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

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

编辑：

当前原型的 Pastebin 链接（当前无响应 - 设计为 1080 像素 x 1920 像素）：

pastebin.com/GmYh9d9F

Answer 1

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

.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);
}

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