将三角形弯曲添加到投影 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

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

Answer 2

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

我编辑了答案，因为你添加了 CSS & HTML。

Answer 3

像那样捏影子不是css可以做到的。使它看起来像那样的唯一方法是像原始站点那样使用图像。您可以将其裁剪成阴影并根据需要对页脚的其余部分进行编码。

将三角形弯曲添加到投影 div

Add a triangle bend to a drop shadow to div

html

css

footer

dropshadow