Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Удаленная работа для IT-специалистов
<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%; }