html - 将三 Angular 形 flex 添加到 div 的投影

Question

所以，我有这个网站，我正在为客户重新开发它，它是 10 年前制作的。目前他们的整个页脚横幅是一张图片。我试图保留页脚，使其看起来与图像完全一样，而不必依赖于对整个内容使用图像，这对我来说似乎是多余的，因为这可以通过 HTML 和 CSS 完成。所以我正在尝试精确设计样式，但似乎无法理解这种轻微的三 Angular 形 flex 效果。我想在页脚的顶部边框添加投影效果，只在网站 Logo 顶部添加一个轻微的三 Angular 形 flex 效果，如下所示:

我可以毫无问题地直接添加投影，但我不确定如何添加图像中那样的轻微三 Angular 形效果。我正在使用 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创建一个简单的三 Angular 形。您可以使用它来将三 Angular 形绝对定位到带有 box-shadow 的元素。这是我能想到的最快的解决方案。

自从您添加了 CSS 和 HTML 后，我编辑了答案。