<style>
.app {
width: 300px;
height: 300px;
background-color: #f57923;
margin: auto;
border-radius: 30%;
position: relative;
z-index: -1;
}
.la {
position: absolute;
width: 150px;
height: 150px;
margin: 70px 100px 20px 50px;
border-top-right-radius: 40px;
background-color: #fff;
clear: both;
}
.rb {
position: absolute;
right: 39px;
top: 0;
height: 150px;
width: 30px;
margin-top: 70px;
margin-right: 15px;
background-color: #fff;
}
.mi {
width: 60%;
height: 80%;
background-color: #f57923;
margin: 30px auto;
border-top-right-radius: 29%;
}
.i {
width: 22%;
height: 58%;
background-color: #fff;
position: absolute;
margin: auto;
bottom: 0;
right: 60px;
}
</style>
<div class="app">
<div class="la">
<div class="mi">
<div class="i">
</div>
</div>
</div>
<div class="rb"></div>
</div>
<div class="app" style=" width: 300px;
height: 300px; background-color: #f57923;
margin: auto;
border-radius: 30%;
position: relative;
z-index: -1;">
<div class="la" style=" position: absolute; width: 150px;
height: 150px;
margin: 70px 100px 20px 50px;
border-top-right-radius: 40px;
background-color: #fff;
clear: both;">
<div class="mi" style=" width: 60%;
height: 80%;
background-color: #f57923;
margin: 30px auto;
border-top-right-radius: 29%;">
<div class="i" style=" width: 22%;
height: 58%;
background-color: #fff;
position: absolute;
margin: auto;
bottom: 0;
right: 60px;">
</div>
</div>
</div>
<div class="rb" style="position: absolute;
right: 39px;
top: 0;
height: 150px;
width: 30px;
margin-top: 70px;
margin-right: 15px;
background-color: #fff;"></div>
</div>