Linear gradient zig zag background image

Question

Is there any way to make this using a background-image instead of a solid color so that it will match the container below it?

---

I'm aware that I could easily accomplish this with a .svg or .png image. I would like to accomplish it purely using CSS only.

---

.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

I actually forgot about this question but I resolved it quite a while back and created a demo of it on Codepen here: 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>

Answer 2

with linear gradient and a plain color , you can do half of your jagged edge. one side a plain color, the other side your background texture. 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> that's all i can think about with plain css. Notice the shorter CSS use for the gradient :) .

other option will be to use border-image, from a png. I have unfortunately no image (nor time to make) ready to use to produce exemple.