cssbattle41

<i class="t a">
  <i class="q b"></i>
  <i class="q c"></i>
  <i class="q"><i class="t r"></i></i>
  <i class="q"><i class="t r f"></i></i>
  <i class="q z"><i class="t d b"></i></i>
  <i class="q z"><i class="t d c"></i></i>
</i>
<style>
  * {background:#293462}
  .t {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
  }
  .a {
    width: 100px;
    height: 140px;
    background: #293462;
  }
  .q {
    width: 50px;
    height: 50px;
    background: #FE5F55;
    position: relative;
  }
  .b {
    border-radius: 0 40px 0 0;
  }
  .c {
    border-radius: 40px 0 0 0;
  }
  .z {
    background: #FE5F55;   
  }
  .d {
    width: 100%;
    height: 100%;
    background: #293462;
  }
  .r {
    width: 30px;
    height: 30px;
    background: #293462;
    border-radius: 50%;
    left: 30px;
  }
  .f {
    left: 20px;
  }
</style>