Zigzag CSS pattern

zigzag.js

function generateZigZag(size, thickness) {
  const ratio = (thickness / size / 2) * 100;
  const quadrantMain = `transparent ${25 - ratio}%, black ${25 - ratio}%, black 25%, transparent 25%`;
  const quadrantTip = `black ${ratio}%, transparent ${ratio}%`;
  return {
    background: [
      `linear-gradient(-45deg, ${quadrantTip}) ${-size}px ${size}px`,
      `linear-gradient(-45deg, ${quadrantTip}) 0 ${size}px`,
      `linear-gradient(-135deg, ${quadrantTip}) ${-size}px ${-size}px`,
      `linear-gradient(-135deg, ${quadrantTip}) 0 ${-size}px`,
      `linear-gradient(135deg, ${quadrantMain}) 0 0`,
      `linear-gradient(135deg, ${quadrantMain}) ${size}px 0`,
      `linear-gradient(45deg, ${quadrantMain}) 0 0`,
      `linear-gradient(45deg, ${quadrantMain}) ${size}px 0`,
    ].join(', '),
    backgroundSize: `${2 * size}px ${2 * size}px`,
  };
}