<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.