为div投影添加三角形弯曲

Question

所以，我有这个网站，我正在重新开发一个客户端，它就像10年前一样。目前，他们的整个页脚横幅是一个图像。我试图保持页脚看起来完全像图像，而不必依赖于使用图像的整个内容，这对我来说似乎是多余的，因为这可以用HTML和CSS完成。所以我正在尝试它的风格，但似乎无法想象这种轻微的三角形弯曲效果。我想在页脚的顶部边框添加阴影效果，只有在网站徽标顶部有一个轻微的三角形弯曲效果，如下所示：

我可以直接添加投影没问题，但我不知道如何在图像中添加那种轻微的三角形效果。我正在使用bootstrap来提供响应能力，因此他们在他们的文档中挖了一下，看看他们是否有任何帮助类来帮助我实现这一目标。我不是最伟大的CSS专家，所以我不知道如何实现这种效果。有没有办法使用纯粹的CSS？如果需要，javascript或jquery也会工作。

这是我的标记和样式的基本布局（3列）：

<div class="row drop-shadow">
    <div class="col-lg-4">
     //content not added yet
    </div>
    <div class="col-lg-4">
     //content not added yet
    </div>
    <div class="col-lg-4">
     //content not added yet
    </div>

</div>


.drop-shadow{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)}

Answer 1

这里只是一个快速的可能性，但this code创建了一个简单的三角形。您可以使用它将三角形绝对定位到具有box-shadow的元素。这是我能想到的最快的解决方案。

我编辑了答案，因为你已经添加了CSS＆amp; HTML。

Answer 2

像这样捏阴影不是你可以用css做的事情。让它看起来像这样的唯一方法是使用原始网站的图像。您可以将其裁剪为阴影，并根据需要对页脚的其余部分进行编码。

Answer 3

创建一个矩形，倾斜并旋转它，然后正确定位以获得所需的效果。