CSS Zigzag Border with a Textured Background

Question

I've been working on a header with a zigzag border. One way to do this is to use images to make the zigzag effect.

(1) Is there any way to create a practical cross-browser zigzag border in CSS without the use of images?

I am also trying to put a textured background on this header that extends to the zigzags. However, the vertical size of the header may change and I am unable to implement the header as a single image.

If I try to add a texture to both the zigzag edges and the header element, chances are, the texture will be off sync.

(2) Any ideas on implementing a textured background that extends onto the zigzags without being off sync?

My [old] code (along with a texture) is here on jsFiddle.

body {
  padding: 20px;
}

header {
  width: 240px;
  background-color: #BCED91;
}

header:after {
  content: " ";
  display: block;
  position: relative;
  width: 240px;
  bottom: -15px;
  height: 15px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAPCAYAAACWV43jAAAAw0lEQVRIx83RsQ3CMBCF4T83AZKLVOmyBa1HSIlXwKySGaDOBClZAToWQIpETQONyxAS+2J4pe9knd5X9EP7QicPYAsUwBnYaHwqSsd1QGmNv1rjL0AZ3pJTKDTorPGnsUE/tDvg+KsG70D96TiAMKvDbtYDO6Cyxt++LYadKpY8hthNtTaVGHLRJJ3R5mJy0SbVJp9D7FJaSyWXNUk1yGVt0lTyMWK3ZmtLySUnaQy55CZdSi7AHmis8U/+JOGWBji8AaYPVy6VELZvAAAAAElFTkSuQmCC) repeat-x;
}

img {
  margin-top: 50px;
}

Edit #1:

Thank you Ana for the code. I took it and improved upon it.

http://dabblet.com/gist/3401493

I don't think that a consistent background will be possible.

user_8620333 · Answer

Now using mask and one gradient you can do it. Check this online generator to get the code: https://css-generators.com/custom-borders/. You can find all the directions and combination of Zig-Zag

body {
  padding: 20px;
}

header {
  min-height: 200px;
  background-color: #BCED91;
}

img {
  margin-top: 50px;
}

.zig-zag {
  --mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) 50% / 60px 100%;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

CSS Zigzag Border with a Textured Background

4 Answers