添加一个三角弯到一个阴影分格

所以，我有这个网站，我正在重新开发一个客户端，它是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)}

来源

2016-06-07 surgiie

你忘了添加你正在使用的相关HTML和CSS。请阅读“* [MCVE] *”准则，了解为什么我们需要看到这一点。 –

编辑过的文章包含它，谢谢！ – surgiie

希望我有时间做更多的评论，但SVG是为这种事情做出的。 ;） –

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

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

来源

2016-06-07 20:11:27 Beepye

我能够通过修改代码来左右像素数量的一点点，并将三角形的颜色改为白色，从而实现我所需要的。谢谢！ – surgiie

不用担心brotato芯片！我刚刚为你更新。 – Beepye

-2

创建一个矩形，歪斜和旋转然后将其放置得当，以获得所需的效果。

来源

2016-06-07 19:57:24 Himanshu

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

来源

2016-06-07 20:17:01

添加一个三角弯到一个阴影分格

回答

相关问题