<body>
<div id="divider"></div>
</body>body {
background: url('https://goo.gl/eN0sys'); // https://subtlepatterns.com
}
body #divider {
position: absolute;
top: 0; left: 0; right: 0;
height: 50%;
background: #222;
}
body #divider::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -20px;
height: 20px;
background-image: linear-gradient(45deg,transparent 75%,#222 75%),
linear-gradient(-45deg,transparent 75%,#222 75%);
background-position: center;
background-size: 20px 20px;
}
External CSS
This Pen doesn't use any external CSS resources.