17/12/2024

<div class="con lgt">
  <div class="d1 drk">
    <div class="d2 lgt">
      <div class="d3 drk">
        <div class="d4 lgt">
          <div class="d5 drk">
            <div class="d6 lgt">
              <div class="d7 drk"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    display: grid;
    place-content: center;
    background: #588A95;
  }
  .con {
    width: 11.25rem;
    height: 11.25rem;
    background: #dd6b4d;
  }
  .lgt {background: #ffffff}
  .drk {background: #588A95}
  div {
    display: flex;
    justify-content: end;
    align-items: end;
  }
  .d1 {height: 9.75rem; width: 9.75rem;}
  .d2 {height: 8.25rem; width: 8.25rem;}
  .d3 {height: 6.75rem; width: 6.75rem;}
  .d4 {height: 5.25rem; width: 5.25rem;}
  .d5 {height: 3.75rem; width: 3.75rem;}
  .d6 {height: 2.25rem; width: 2.25rem;}
  .d7 {height: 0.75rem; width: 0.75rem;}
</style>