CSS Battle #41

Battle: #41

<div class="bl"></div>
<div class="br"></div>
<div class="ml"></div>
<div class="mr"></div>
<div class="dot a"></div>
<div class="dot b"></div>
<style>
  body {
    margin: 0;
    background: #293462;
  }
  div {
    position: absolute;
  }
  .dot {
    top: 140px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #293462;
  }
  .a {
    right: 205px;
  }
  .b {
    left: 205px;
  }
  .mr {
    z-index: -1;
    background: #fe5f55;
    left: 50%;
    bottom: 0;
    width: 50px;
    height: 220px;
    border-radius: 40px 0 0 0;
  }
  .ml {
    z-index: -1;
    background: #fe5f55;
    right: 50%;
    bottom: 0;
    width: 50px;
    height: 220px;
    border-radius: 0 40px 0 0;
  }
  .bl {
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 120px;
    background: #293462;
    border-radius: 0 40px 0 0;
  }
  .br {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 120px;
    background: #293462;
    border-radius: 40px 0 0;
  }
</style>