<div class="container">
  content before divider...
  <hr>
  content after divider...
</div>
body{
    background: white;
}
.container{
  width: 400px;
  height: 600px;
  margin: 0 auto;
  background: wheat;
  padding: 20px;
}
hr {
    position: relative;
    width: 100%;
    padding-top:23px;
    height: 1px;
    border:0;
}
hr:before {
  
    content:"";
    display:block;
    position: relative;
    top: -21px;
    height: 22px;
    background: linear-gradient( 45deg, transparent 46px, red 47px, transparent 45px) 0 0,
                linear-gradient(-45deg, transparent 46px, red 47px, transparent 45px) 0 0;
    background-repeat: repeat-x;
    background-size:40px 47px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.