CSS Battle #92

Battle: #92

<div class="circle"></div>
<div class="circle l"></div>
<div class="circle r"></div>
<div class="top t-l"></div>
<div class="top t-r"></div>
<div class="bottom t-l"></div>
<div class="bottom t-r"></div>
<div class="mid"></div>
<style>
  body {
    background: #6592cf;
    margin: 0;
  }
  div {
    position: absolute;
  }
  .mid {
    z-index: -1;
    transform: translateY(-50%);
    width: 100%;
    height: 40px;
    background: #243d83;
    top: 50%;
  }
  .circle {
    z-index: 1;
    background: #243d83;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }
  .l {
    left: -26px;
  }
  .r {
    left: 426px;
  }
  .top {
    background: #6592cf;
    width: 32px;
    height: 140px;
    border-radius: 0 0 30px 30px;
  }
  .t-l {
    left: 71px;
  }
  .t-r {
    left: 297px;
  }

.bottom {
    background: #6592cf;
    width: 32px;
    height: 140px;
    border-radius: 30px 30px 0 0;
    bottom: 0;
  }
  .t-l {
    left: 71px;
  }
  .t-r {
    left: 297px;
  }
</style>