Html 为“添加阴影”；“之字形”；边境

我目前正在设计一个网站，我已经为页脚在顶部创建了一个“之字形”边框。 为了在网站中创建一些深度，我想在“之字形”的三角形上添加一个阴影，这就是我目前遇到的问题

下面是我现在看到的页脚示例：

正文{
背景：url(http://i.imgur.com/R1yaNOy.png);
}
#页脚{
位置：绝对位置；
宽度：100%；
高度：200px；
底部：0；
背景色：#333；
}
#页脚：之前{
内容：“；
显示：块；
位置：相对位置；
顶部：-21px；
高度：21px；
背景：线性梯度（45度，#333 50%，透明50%）0，线性梯度（-45度，#333 50%，透明50%）0；
背景重复：重复-x；
背景尺寸：40px40px，40px40px；
}

---

您可以以某种方式使阴影具有与您用于制作之字形相同的渐变

CSS

#页脚：之前{
内容：“；
显示：块；
位置：相对位置；
顶部：-21px；
高度：22px；
背景：线性梯度（45度，#333 50%，蓝色50%，透明55%）0，
线性梯度（-45度，#333 50%，蓝色50%，透明55%）0；
背景重复：重复-x；
背景尺寸：40px47px，40px47px；
}

正文{
背景：url(http://i.imgur.com/R1yaNOy.png);
}
#页脚{
位置：绝对位置；
宽度：100%；
高度：200px；
底部：0；
背景色：#333；
}
#页脚：之前{
内容：“；
显示：块；
位置：相对位置；
顶部：-21px；
高度：22px；
背景：线性梯度（45度，#333 50%，蓝色50%，透明55%）0，线性梯度（-45度，#333 50%，蓝色50%，透明55%）0；
背景重复：重复-x；
背景尺寸：40px47px，40px47px；
}

---

你搜索过“投影”吗？我一直在搜索这个网站（和其他网站）以获得我想要的结果，但我似乎找不到任何适合我的东西。我对网页设计和css很陌生。我尝试的是普通的方块阴影，但它只是被放在三角形下面，就像这是我想要实现的图像感谢你的回复，这或多或少是我想要的。为了比较这两个选项，您将如何使用此webkit筛选器？添加了使用筛选器的示例。效果不太好，我不知道确切的原因。它只能在webkit中工作。