Как правильно сделать такой блок?

.green { 
  width: 200px; 
  height: 200px; 
  background-color: #ADFFEB; 
  position: relative; 
  border-radius: 20px 20px 60px 20px; 
 } 
  
 .green::before { 
  content: ""; 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  top: 0; 
  z-index: -1; 
  background-color: #f00; 
  border-radius: 22px 22px 0 22px; 
 }

<div class="green"></div>

.wrapper { 
  width: 200px; 
  height: 200px; 
  background-color: red; 
  border-radius: 35px 35px 0 35px; 
} 
 
.block { 
  width: 200px; 
  height: 200px; 
  background-color: green; 
  border-radius: 35px; 
}

<div class="wrapper"> 
  <div class="block"></div> 
</div>