Я бы сделал это, как показано ниже, используя маску и градиент:
.box {
margin: auto;
padding: 0 35px 32px 0; /* исправить положение изображения */
max-width: 200px;
/* оранжевый круг с градиентом */
background: radial-gradient(circle closest-side, orange 85%, transparent 86%);
-webkit-mask:
/* показывать только оранжевый кружок (как фон) */
radial-gradient(circle closest-side, orange 85%, transparent 86%),
/* а также показать 70% сверху */
linear-gradient(#fff, #fff) top/100% 70% no-repeat;
}
.box img {
display: block;
width: 100%;
}
<div class="box">
<img src="https://i.sstatic.net/8Kjvd.png">
</div>
Другая версия с использованием нескольких фонов. Легче управлять и быстрее реагировать
.box {
display:inline-block;
--grad:radial-gradient(circle closest-side at 50% 58%, orange 97%, transparent 98%);
background:
url(https://i.sstatic.net/8Kjvd.png) 0 50%/contain no-repeat, var(--grad);
-webkit-mask: var(--grad), linear-gradient(#fff, #fff) top/100% 70% no-repeat;
}
.box::before {
content: "";
display: block;
padding-top: 100%;
}
<div class="box" style="width:300px"></div>
<div class="box" style="width:200px"></div>
<div class="box" style="width:100px"></div>
Свободный перевод ответа от участника @Temani Afif.