cssbattle28

<div class="q">
  <i class="a z"></i>
  <i class="a b"></i>
  <i class="a b z"></i>
  <i class="a"></i>
  <i class="a c "></i>
  <i class="a z"></i>
  <i class="a"></i>
  <i class="a c z"></i>
<div>
<style>
  * {background:#1A4341}
  .q {
    width: 280px;
    position: absolute;
    top: 90px;
    left: 70px;
  }
  .a {
    width: 50px;
    height: 50px;
    background: #F3AC3C;
    border-radius: 50%;
    display: inline-block;
    margin: 0 16px 16px 0;
  }
  .b {
    border-radius: 50% 50% 0 0;
  }
  .c {
    border-radius: 0 0 50% 50%;
  }
  .z {
    background: #998235;
  }
</style>