<div class="signature">
<div class="purple-box">
<div class="photo">
<img src="" alt="Circle Image" id="circle-image">
</div>
</div>
</div>.signature {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.6;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #ccc;
position: relative; /* с виду лишнее */
overflow: hidden; /* с виду лишнее */
}
.purple-box {
display: flex;
width: fit-content;
background-color: purple;
border-radius: 0 50% 50% 0;
}
.purple-box::before {
content: "";
flex-shrink: 0;
width: 20px;
background-color: green;
z-index: 1;
border-radius: 0 10% 10% 0; /*аккуратно тут с процентами..*/
}
.photo {
display: block;
width: 80px;
height: 80px;
margin: 10px;
}
.photo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
А где сказано, какого размера оно должно быть?
Для наложения блоков используйте гриды, абсолюты тут лишние.
Чтобы понять почему текст сейчас не поверх, загуглите "контекст наложения".