CSS Battle #28

Battle: #28

<div>
  <span class="c2"></span>
  <span class="c1"></span>
  <span class="c2"></span>
  <span class="c1"></span>
  <span class="c1"></span>
  <span class="c2"></span>
  <span class="c1"></span>
  <span class="c2"></span>
</div>

<style>
  span:nth-child(1) {
    border-radius: 100%;
  }
  span:nth-child(2) {
    border-radius: 100% 100% 0 0;
    left: 70px;
  }
  span:nth-child(3) {
    border-radius: 100% 100% 0 0;
    right: 70px;
  }
  span:nth-child(4) {
    border-radius: 100%;
    right: 0;
  }
  span:nth-child(5) {
    border-radius: 0 0 100% 100%;
    bottom: 0;
  }
  span:nth-child(6) {
    border-radius: 100%;
    bottom: 0;
    left: 70px;
  }
  span:nth-child(7) {
    border-radius: 100%;
    bottom: 0;
    right: 70px;
  }
  span:nth-child(8) {
    border-radius: 0 0 100% 100%;
    bottom: 0;
    right: 0;
  }
  div {
    z-index: -1;
    position: relative;
    left: 70px;
    top: 90px;
    width: 260px;
    height: 120px;
  }
  span {
    position: absolute;
    height: 50px;
    width: 50px;
  }
  .c1 {
    background: #f3ac3c;
  }
  .c2 {
    background: #998235;
  }
  body {
    background: #1a4341;
    margin: 0;
  }
</style>