title: Wave border in CSS
body: <p>I know what you're thinking, there's at least a million questions like this, asking about waves in borders, or waves at the edges of elements. However, I have a different question. What I need is a combination between a <a href="https://localmotors.com/blog/post/zig-zag-borders-in-css/1205/" rel="noreferrer" title="Zig-zag border tutorial">zigzag-edge</a> (I have no idea how to call it, I'm not English) and a <a href="https://stackoverflow.com/questions/17202548/wavy-shape-with-css" title="Wave shape CSS">wave-edge</a>. </p>
  
  <p>More specific: I need to create this:</p>
  
  <p><a href="https://i.stack.imgur.com/o5azQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/o5azQ.png" alt="enter image description here"></a></p>
  
  <p>The top part of the blue element has to be a wavy kind of border, where the top part is transparent so the underlying image shows 'through the element', so to say.</p>
  
  <p>Is this do-able with CSS? I'd rather not use images, simply because there will be multiple elements like these, with different colours (that means different edge colours per element).</p>