<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
:root {
--dark: #263e4a;
--light: #5c95b1;
}
body {
height: 100vh;
width: 100vw;
overflow: hidden;
margin: 0;
background: var(--dark);
}
div {
width: 100vw;
height: 10vh;
background: repeating-linear-gradient(
90deg,
var(--dark) 5%,
var(--light) 5%,
var(--light) 10%,
var(--dark) 10%,
var(--dark) 15%,
var(--light) 15%,
var(--light) 20%,
var(--dark) 20%,
var(--dark) 25%,
var(--light) 25%
);
border-top: 2px solid var(--dark);
border-bottom: 2px solid var(--dark);
position: relative;
margin-left: 1%;
box-sizing: border-box;
}
div:nth-child(2),
div:nth-child(6),
div:nth-child(10),
div:nth-child(4),
div:nth-child(8) {
margin-left: 2.5%;
}
div:nth-child(3),
div:nth-child(7) {
margin-left: 4%;
}
div:before {
content: "";
background: var(--light);
position: absolute;
left: -5%;
width: 5%;
height: 100%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.