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 practica

Answer 1

Improved minimal CSS:

div {
  background: #1ba1e2;
  position: relative;
}

div:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 30px;
  background: linear-gradient(-45deg, transparent 75%, #1ba1e2 0) 0 50%,
              linear-gradient(45deg, transparent 75%, #1ba1e2 0) 0 50%;
  background-size: 30px 30px;
}

/* Styles just for demo */
h1 {
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 0.5em;
}

  
Zig Zag Borders

If you want to remove duplicate values you can use CSS variables AKA Custom properties. They are working everywhere except IE.

:root {
  --background-color: #1ba1e2;
  --zigzag-item-size: 30px;
}

div {
  background: var(--background-color);
  position: relative;
}

div:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: var(--zigzag-item-size);
  background: linear-gradient(-45deg, transparent 75%, var(--background-color) 0) 0 50%,
              linear-gradient(45deg, transparent 75%, var(--background-color) 0) 0 50%;
  background-size: var(--zigzag-item-size) var(--zigzag-item-size);
}

/* Styles just for demo */
h1 {
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 0.5em;
}

  
Zig Zag Borders

Small note:

I use zero 0 in gradient color-stops to avoid duplicating previous values because according to the CSS3 images specs color-stop position can't be less than previous one.

If a color-stop has a position that is less than the specified position of any color-stop before it in the list, set its position to be equal to the largest specified position of any color-stop before it.