How to make CSS zig-zag borders?
<p>I am trying to  get this effect along the baseline of my header element.</p>

<p><a href="https://i.stack.imgur.com/CSZDi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CSZDi.png" alt="enter image description here"></a></p>

<p>What is the best way to go about it? Is there any way to do it without images (maybe SVG)?</p>

<p>A way I reckon this could be accomplished pretty nicely is using a repeat-x background image of a white square on an absolutely positioned pseudo element. However, that uses images and I'd love to be able to avoid that.</p>