How to overcome from overlapping of html elements?

<div class="sq">
<div class="a "></div>
<div class="b"></div>
<div class="c"></div>
<div class="d "></div>
</div>

<style>
  * {
    margin: 0;
    background:#222730;
  }
  .a{
    max-width:100%;
    height:150px;
   	margin-top:4.69em;
    background:#4CAAB3;
  }
  .b{
    width:250px;
    height:250px;
    margin-top:-12.5em;
    transform: rotate(45deg);
    margin-left:auto;
    margin-right:auto;

    background:#222730;
  }
  .c{
    width:150px;
    height:150px;
    margin-top:-12.5em;
    transform: rotate(45deg);
    margin-left:auto;
    margin-right:auto;
    background:#4CAAB3;
  }
   .d{
    background:white;
    margin-left:auto;
    margin-right:auto;
    width:50px;
    height:50px;
    z-index:;
    margin-top:-8em;
    
  }
</style>

Annotation 2021-02-25 181634
I am trying practicing to make like above figure. Anyone can help me on this, how to overcome from this type of overlapping , I think that z-index will solve this type of problem but I don’t understand how?

But till now I am able to make this figure…
Annotation 2021-02-25 182027