插入阴影为“之字形”边界

Question

我正在设计一个网站，对于页脚，我在顶部创建了一个“之字形”边框。 为了在网站上创建一些深度，我想在“之字形”中的三角​​形上添加一个投影，这就是我目前所处的位置。

以下是我现在拥有的页脚示例：http://jsfiddle.net/CwXp4/

body {
  background: url(http://i.imgur.com/R1yaNOy.png);
}

#footer {
  position: absolute;
  width: 100%;
  height: 200px;
  bottom: 0;
  background-color: #333;
}

#footer:before {
  content: "";
  display: block;
  position: relative;
  top: -21px;
  height: 21px;
  background: linear-gradient( 45deg, #333 50%, transparent 50%) 0 0, linear-gradient(-45deg, #333 50%, transparent 50%) 0 0;
  background-repeat: repeat-x;
  background-size: 40px 40px, 40px 40px;
}

<div id="footer"></div>

那里有人提供了一些关于如何添加投影的提示吗？

Answer 1

你可以用某种方式制作阴影，使用相同的渐变来制作曲折。

CSS

#footer:before {
    content: "";
    display: block;
    position: relative;
    top: -21px;
    height: 22px;
    background: linear-gradient( 45deg, #333 50%, blue 50%, transparent 55%) 0 0,
                linear-gradient(-45deg, #333 50%, blue 50%, transparent 55%) 0 0;
    background-repeat: repeat-x;
    background-size: 40px 47px, 40px 47px;
}

body {
  background: url(http://i.imgur.com/R1yaNOy.png);
}

#footer {
  position: absolute;
  width: 100%;
  height: 200px;
  bottom: 0;
  background-color: #333;
}

#footer:before {
  content: "";
  display: block;
  position: relative;
  top: -21px;
  height: 22px;
  background: linear-gradient( 45deg, #333 50%, blue 50%, transparent 55%) 0 0, linear-gradient(-45deg, #333 50%, blue 50%, transparent 55%) 0 0;
  background-repeat: repeat-x;
  background-size: 40px 47px, 40px 47px;
}

<div id="footer"></div>

fiddle

你也可以通过webkit-filter阴影获得阴影，但这支持有限

CSS

#footer:before {
    content: "";
    display: block;
    position: relative;
    top: -21px;
    height: 22px;
    background: linear-gradient( 45deg, #333 50%, transparent 50%) 0 0,
                linear-gradient(-45deg, #333 50%, transparent 50%) 0 0;

    background-repeat: repeat-x;
    background-size: 40px 47px, 40px 47px;
    -webkit-filter: drop-shadow(red 0px -5px 5px);
}

body {
  background: url(http://i.imgur.com/R1yaNOy.png);
}

#footer {
  position: absolute;
  width: 100%;
  height: 200px;
  bottom: 0;
  background-color: #333;
}

#footer:before {
  content: "";
  display: block;
  position: relative;
  top: -21px;
  height: 22px;
  background: linear-gradient( 45deg, #333 50%, transparent 50%) 0 0, linear-gradient(-45deg, #333 50%, transparent 50%) 0 0;
  background-repeat: repeat-x;
  background-size: 40px 47px, 40px 47px;
  -webkit-filter: drop-shadow(red 0px -5px 5px);
}

<div id="footer"></div>

fiddle with filter