我如何在 css 中创建一个三角形，最长的边上有一个框阴影

Question

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

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

编辑：

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

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>

我如何在 css 中创建一个三角形，最长的边上有一个框阴影

How can i create a triangle in css with a box-shadow on the longest side

html

css

triangular

cordova