Zig Zag divider w/ SVG shadow experiment (buggy)

dabblet.css

body {
    background:url(http://i.imgur.com/qKsVr.png);
}

.box {
    width:400px;
    background:	white;
    position: relative;
}

.zig-zag-divider {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 30px;
    bottom: -29px;

    /*outline: 1px solid hsla(0, 100%, 50%, 0.2);*/
}
.zig-zag-divider:before{
  content: "";
  display: block;
  position: relative;
  top: 1px;
  width: 100%;
  height: 30px;
  background: linear-gradient(-45deg, transparent 75%, white 75%) 0 50%,
              linear-gradient( 45deg, transparent 75%, white 75%) 0 50%;
  background-repeat: repeat-x;
  background-size: 30px 30px, 30px 30px;
  -webkit-filter: drop-shadow(0px 1px 5px rgba(0,0,0,0.42));
  /*filter: url(#drop-shadow);*/
}
#zig-zag-divider-shadow{
  /*display: none;*/
}

dabblet.html

<!--Shadow SVG for Firefox-->
<svg id="zig-zag-divider-shadow" height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="drop-shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
  <feOffset dx="0" dy="1" result="offsetblur"/>
  <feFlood flood-color="rgba(0,0,0,0.42)"/>
  <feComposite in2="offsetblur" operator="in"/>
  <feMerge>
  <feMergeNode/>
  <feMergeNode in="SourceGraphic"/>
  </feMerge>
  </filter>
</svg>
<div class="box">
  Lorem ipsum dolor sit amet
  <div class="zig-zag-divider"></div>
  
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}