CSS Battle #44 - Stripes

stripes.html

<div class="circle right"></div>
<div class="circle left"></div>
<div class="rect"></div>
<style>
  body {
    background: #1A4341;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .rect {
    height: 20px;
    width: 150px;
    background: #F3AC3C;
    box-shadow:  0 20px 0 0 #1A4341,
      			 0 -20px 0 0 #1A4341,
      			 0 40px 0 0 #F3AC3C,
      			 0 -40px 0 0 #F3AC3C,
    			 0 60px 0 0 #1A4341,
      			 0 -60px 0 0 #1A4341,
      			 0 80px 0 0 #F3AC3C,
      			 0 -80px 0 0 #F3AC3C;
  }
  :root {
    --shift: 250;
    --height: 240px;
    --width: 155px;
  }
  .circle {
    height: var(--height);
    width: var(--width);
    background: #1A4341;
    position: absolute;
    border-radius: 50%;
    z-index: 1;
  }
  .right {
    left: var(--shift);
  }
  .left {
    right: var(--shift);
  }
</style>