Q:

How to make CSS zig-zag borders? 

I am trying to  get this effect along the baseline of my header element. 

What is the best way to go about it?  Is there any way to do it without images (maybe SVG)? 
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. 

A:

Here is solution.  It's called zig-zag border. 
http://jsfiddle.net/justinmc/QqnD3/
<div class="container">
    <h1>Content Here</h1>
</div>

.container {
    position: relative;
    padding: 8px 8px 32px 8px;
    background: #dddccf;
}

.container:after {
    background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}

credits
https://cocreate.localmotors.com/blog/post/zig-zag-borders-in-css/1205/

