线性渐变之字形背景图像

Question

有没有办法使用background-image而不是纯色来制作它，以便它与下面的容器相匹配？

---

我知道我可以使用.svg或.png图片轻松完成此操作。我想纯粹只使用CSS来完成它。

---

.zigzag {
    tag:position:absolute;
    top:320px;
    z-index:99;
    height:20px;
    width:100%;
    background:
        linear-gradient(0deg, transparent 30px, white 30px),
        linear-gradient(-135deg, white 19px, transparent 19px),
        linear-gradient(135deg, white 19px, transparent 19px);
    background-color: transparent;
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 100% 100%, 30px 30px, 30px 30px;
    transform:rotate(180deg);
}

Answer 1

使用线性渐变和纯色，您可以做一半的锯齿状边缘。一面是素色，另一面是背景纹理。 http://codepen.io/gc-nomade/pen/kdjce

div:after {
  content:'';
  display:block;
  height:20px;
  background:repeating-linear-gradient(
    45deg,
    transparent ,
    transparent  50%,
    gray 50%,  
    gray
  ) 
    bottom,
    repeating-linear-gradient(
      -45deg,
      transparent ,
      transparent  50%,
      gray 50%,  
      gray
    ) 
    bottom
    ;
  background-size:30px 30px;
  background-repeat:repeat-x;
  box-shadow:0 -100px/* or bigger */ 0 100px gray;/* this to fill background of parent div */
}
body {
  margin:0;
  background:url(http://www.bene.be/images/uploads/2011-blog/20111007/textures/texture-07.jpg)
    }

<div><p> lets have some content</div> 这就是我用普通的CSS思考的全部内容。请注意渐变的CSS使用时间较短:)。

其他选项将是使用border-image，来自png。遗憾的是，我没有准备用于制作例子的图像（也没有时间制作）。

Answer 2

我实际上已经忘记了这个问题但我已经解决了一段时间，并在Codepen上创建了它的演示：http://codepen.io/dcdev/pen/noAiw

CSS

body { 
  background-color:transparent;
}
div { 
  margin:0 auto;
  width:940px;
  height:300px;
}
div.top { 
  background-image:url(http://www.placehold.it/940x300/2D8ABE);
}
div.bottom { 
  background-image:url(http://www.placehold.it/940x300/A93459); 
}
#zz {
  max-width:940px;
  margin-top:-125px;
  height:15px;
  background:-webkit-linear-gradient(0deg,transparent 15px,#fff 15px),-webkit-linear-gradient(-135deg,#fff 10px,transparent 10px),-webkit-linear-gradient(135deg,#fff 10px,transparent 10px);background:-moz-linear-gradient(0deg,transparent 15px,#fff 15px),-moz-linear-gradient(-135deg,#fff 10px,transparent 10px),-moz-linear-gradient(135deg,#fff 10px,transparent 10px);background:-o-linear-gradient(0deg,transparent 15px,#fff 15px),-o-linear-gradient(-135deg,#fff 10px,transparent 10px),-o-linear-gradient(135deg,#fff 10px,transparent 10px);background:-ms-linear-gradient(0deg,transparent 15px,#fff 15px),-ms-linear-gradient(-135deg,#fff 10px,transparent 10px),-ms-linear-gradient(135deg,#fff 10px,transparent 10px);background:linear-gradient(0deg,transparent 15px,#fff 15px),linear-gradient(-135deg,#fff 10px,transparent 10px),linear-gradient(135deg,#fff 10px,transparent 10px);background-color:transparent;background-position:center center;background-repeat:repeat-x;-webkit-background-size:100% 100%,15px 15px,15px 15px;-moz-background-size:100% 100%,15px 15px,15px 15px;background-size:100% 100%,15px 15px,15px 15px;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);
}

HTML

<div class="top"></div>
<div id="zz" role="separator"></div>
<div class="bottom"></div>