Discussion on: CSS Battle #10 - Cloaked Spirits

[Nancy Do]

1 div solution

<div></div>
<style>
  body {
    background: #62306D;
  }

  *::before, *::after {
    position: fixed; 
    content: "";
    background: #E38F66;
    color: #E38F66;
  }

  div {
    margin: 100px 142px; 
    width: 100px;
    height: 200px;
    background: #F7EC7D;
    color: #F7EC7D;
    box-shadow: 
      -100px 100px, 
      100px 100px;
  }

    div::before {
    margin: -50px 0;
    width: 100px; 
    height: 100px; 
    border-radius: 50%;
    color: #AA445F;
    box-shadow: 
      -100px 100px, 
      100px 100px;
  }

  div::after {
    margin: -30px 20px;
    width: 60px; 
    height: 60px; 
    background: #AA445F;
    border-radius: 50%;
    box-shadow: 
      -100px 100px, 
      100px 100px;
  }
</style>