<hr class="zig">
<hr class="zag">

<!-- forked from http://blog.eliacontini.info/post/42743847160/notes-on-css3-box-with-zig-zag-border*/ -->
hr.zig, hr.zag {
  border: none;
  height: 30px;
  margin: 0 50px;
}

hr.zig{
  background: linear-gradient(-135deg, #FFF 20px, rgba(0, 0, 0, 0) 0) 0 5px, linear-gradient(135deg, #FFF 20px, rgba(0, 0, 0, 0) 0) 0 5px;
  background-color: rgba(0, 0, 0, 0);
  background-position: center bottom;
  background-repeat: repeat-x;
  background-size: 20px 40px;
  z-index: 100;
  position: relative;
}

hr.zag {
  background: linear-gradient(-135deg, #333 20px, rgba(0, 0, 0, 0) 0) 0 5px, linear-gradient(135deg, #333 20px, #FFF 0) 0 5px;
  background-color: rgba(0, 0, 0, 0);
  background-position: center bottom;
  background-repeat: repeat-x;
  background-size: 20px 40px;
  z-index: 50;
  margin-top: -28px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.