平滑的径向梯度边缘被卡住

Question

so I'm working on this UI and I've decided I want to try and animate it to pop out from the main portrait circle, my only problem is I cannot for the life of me get this radial-gradient to be smooth.

The entire issue comes from me wanting an inverted border-radius on the left-hand side so it matches up with the portrait circle when stationary. I saw a couple of different ways to do this, but I'm fairly amateur and figured this radial gradient seemed like the most simple way. However, now I'm left with this horrible jagged edge scooped side.

I've looked at different gradient styles instead of using circle and I tried wrapping my head around "Andreas Larsen's" " easing linear gradients " post to no avail.

Here's a JSFiddle with only the necessary code showing the UI, if anyone could assist it would be more valuable to me than you know :) https://jsfiddle.net/Infamoose/thj9305f/1/

EDIT: Ignore all the wonky bars and icon's, I am fixing that :P I'm just trying to set up the microphone icon in the radial-gradient section first.

 .positive { color: rgb(114, 204, 114); } .negative { color: rgb(224, 50, 50); } .tempbg { background: solid; background-color: rgb(0, 122, 204); } .portrait { background-color: rgb(219, 12, 12); position: absolute; top: 34px; left: 10px; width: 120px; height: 120px; border-radius: 110px; z-index: 2; } .container { background-color: rgba(0, 0, 0, 0.288); position: absolute; top: 50px; left: 100px; width: 260px; height: 85px; border-radius: 50px; border-bottom-left-radius: 0%; border-top-left-radius: 0%; z-index: 1; } #heal, #armor, #hunger, #thirst, #stamina, #voice { } #boxHeal, #boxArmor, #boxStamina, #boxHunger, #boxThirst, #boxVoice { width: 100%; height: 100%; transition: 0.2s ease-in-out; } #heal { position: absolute; left: 40px; bottom: 68px; width: 120px; height: 10px; padding: 0; float:left; } #armor { position: absolute; left: 40px; bottom: 56px; width: 120px; height: 10px; padding: 0; float:left; } #hunger { position: absolute; left: 62px; bottom: 32px; width: 107.5px; height: 10px; } .iconhunger { position: relative; left: -40px; bottom: 10px; z-index: 3; align-content: left; } #thirst { position: absolute; left: 22px; bottom: 61px; width: 107.5px; height: 10px; padding: 0; float:left; } .iconthirst { position: relative; left: 0.5px; bottom: -34px; z-index: 3; align-content: left; } #stamina { position: absolute; left: 62.5px; bottom: 11px; width: 107.5px; height: 10px; padding: 0; float:left; } .iconstamina { position: absolute; z-index: 3; align-content: left; left: -20px; bottom: 6px; } #voice { position: absolute; left: 148.5px; bottom: -500px; width: 107.5px; height: 10px; padding: 0; float:left; } .fa-microphone { position: inherit; z-index: 3; left: 57px; bottom: 525.5px; font-size: 38; } .fa-microphonebg { position: absolute; top: -575px; left: -10px; width: 121px; height: 85px; background-image: radial-gradient(circle at 0% 50%, rgba(0,0,0,0) 50px, #fff 50px); border-top-right-radius: 40px; border-bottom-right-radius: 40px; z-index: 2; } #boxHeal { background: rgb(97, 191, 92); border: solid 0.3px rgb(97, 191, 92); border-radius: 30px; } #boxArmor { background: rgb(96, 136, 220); border: solid 0.3px rgb(96, 136, 220); border-radius: 30px; } #boxHunger { background: rgb(255, 255, 255); position: absolute; left: -10; bottom: 9.7px; border: solid 0.3px #ffffff; border-radius: 30px; } #boxThirst { background:rgb(255, 255, 255); position: absolute; left: 30px; bottom: -32; border: solid 0.3px #ffffff; border-radius: 30px; } #boxStamina { background: rgb(255, 255, 255); position: absolute; left: -10px; bottom: 5px; border: solid 0.3px #ffffff; border-radius: 30px; } #boxVoice { background: rgb(255, 255, 255); position: absolute; left: -96px; bottom: -4px; border: solid 0.3px #ffffff; border-radius: 30px; } #boxVoice.active { background: rgb(235, 36, 39); } .position { font-family: "gta-ui", Verdana, Tahoma; font-size: 30px; position: absolute; bottom: 0.35%; left: 16%; text-shadow: -1px 1px 2px #000, 1px 1px 2px #000, 1px -1px 0 #000, -1px -1px 0 #000; color: #ffffff; } .seperator { color: rgb(224, 50, 50); } .seperator2 { color: rgb(240, 200, 80); }

 <html> <head> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css"/> <link href="css/icono.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="https://icono-49d6.kxcdn.com/icono.min.css"> <script src="https://kit.fontawesome.com/3f31cfc768.js"></script> </head> <body class="tempbg"> <div class="portrait"> </div> <div class="container"> <div id="heal"> <div id="boxHeal"></div> </div> <div id="armor"> <div id="boxArmor"></div> </div> <div id="hunger"> <svg class="iconhunger" width="36" height="12" viewBox="0 0 14 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0)"> <path d="M9.44096 7.09788L12.0944 4.62314C13.9855 2.86906 14.0734 1.25095 13.9708 0.462298C13.9561 0.407908 13.9268 0.353518 13.8828 0.312725C13.7656 0.203945 13.5897 0.203945 13.4724 0.312725L12.6954 1.03339L2.94672 10.0893C2.62421 10.3885 2.62421 10.8916 2.94672 11.1907C3.26923 11.4899 3.81164 11.4899 4.13415 11.1907L4.33939 10.946C4.70588 10.4973 6.58232 7.98172 6.86086 7.58739C6.97813 7.42422 7.09541 7.32904 7.18337 7.28825C7.32997 7.23386 7.44724 7.30185 7.44724 7.30185C8.09227 7.65538 8.91321 7.58739 9.44096 7.09788Z" fill="white"/> <path d="M4.95508 6.20047C5.49749 5.9965 5.86398 6.17327 6.09854 6.36364L6.86084 5.65657C6.65561 5.43901 6.46503 5.08547 6.68493 4.59596C6.99278 3.90249 7.242 3.45377 6.17184 2.37957C5.131 1.29176 3.4598 0.285548 2.68283 0.0679876C2.50692 0.027195 2.331 0 2.19906 0C2.1844 0 2.1844 0 2.16974 0C2.12577 0 2.09645 0.0135975 2.06713 0.0407925C1.99383 0.10878 1.99383 0.21756 2.06713 0.27195L4.70587 2.7195C4.83781 2.84188 4.83781 3.04584 4.70587 3.18182C4.57393 3.3042 4.35404 3.3042 4.20744 3.18182L3.89959 2.89627L3.21058 2.25719C2.69749 1.78127 2.36032 1.46853 2.03781 1.22378C1.26084 0.625486 0.95299 0.611888 0.95299 0.611888C0.95299 0.611888 0.835713 0.598291 0.733095 0.679876C0.645137 0.775058 0.659797 0.883838 0.659797 0.883838C0.659797 0.883838 0.674456 1.16939 1.33414 1.90365C1.59802 2.2028 1.93519 2.51554 2.44828 2.99145L3.13728 3.63054L3.44514 3.91608C3.57707 4.03846 3.57707 4.24242 3.44514 4.3784C3.3132 4.50078 3.0933 4.50078 2.94671 4.3784L0.307964 1.93085C0.234666 1.86286 0.117388 1.86286 0.0587496 1.93085C0.0294302 1.95804 0.0147705 1.98524 0.0147705 2.02603C0.0147705 2.02603 0.0147705 2.03963 0.0147705 2.05322C0.0147705 2.1756 0.0440899 2.33877 0.0880689 2.50194C0.307964 3.22261 1.40744 4.75913 2.58022 5.75175C3.73833 6.71717 4.20744 6.48601 4.95508 6.20047Z" fill="white"/> <path d="M9.51434 7.737C9.1625 7.95456 8.73737 8.07694 8.29758 8.07694C8.03371 8.07694 7.78449 8.03614 7.53528 7.95456L10.6138 11.3539C11.0683 11.7619 11.7866 11.7619 12.2264 11.3539C12.6662 10.946 12.6662 10.2661 12.2264 9.85821L9.51434 7.737Z" fill="white"/> </g> </svg> <div id="boxHunger"> </div> </div> <div id="thirst"> <svg class="iconthirst" width="36" height="14" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3.74196 0.100677C3.72525 0.0356591 3.65843 -0.013104 3.57491 0.00315034C3.52479 0.0194047 3.49138 0.0519134 3.47467 0.100677C2.9067 4.55437 0 5.46462 0 8.5692C0.0501155 10.5035 1.68722 12.0476 3.67514 11.9989C5.61294 11.9664 7.16652 10.4385 7.19993 8.5692C7.21663 5.48087 4.30993 4.55437 3.74196 0.100677ZM3.19069 5.02575C3.15728 5.15579 3.10716 5.30207 3.07375 5.44836C2.82317 6.34235 2.52248 7.35013 2.52248 8.52044C2.52248 9.15436 2.13826 9.38192 1.77075 9.38192C1.35312 9.38192 1.01902 9.05683 1.01902 8.65048C1.01902 7.26885 1.70393 6.35861 2.30531 5.56215C2.48907 5.31833 2.67283 5.07451 2.82317 4.84695C2.88999 4.74943 3.00693 4.73317 3.10716 4.79819C3.12387 4.81444 3.14057 4.8307 3.15728 4.84695C3.19069 4.89572 3.20739 4.96073 3.19069 5.02575Z" fill="white"/> </svg> <div id="boxThirst"></div> </div> <div id="stamina"> <svg class="iconstamina" width="36" height="12" viewBox="0 0 21 8" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H16C17.1046 0 18 0.89543 18 2V5.71428C18 6.81885 17.1046 7.71429 16 7.71429H2C0.895431 7.71429 0 6.81886 0 5.71429V2C0 0.895433 0.895429 0 2 0ZM2 1C1.44772 1 1 1.44772 1 2V5.71429C1 6.26657 1.44772 6.71429 2 6.71429H16C16.5523 6.71429 17 6.26657 17 5.71428V2C17 1.44772 16.5523 1 16 1H2ZM19.2857 2.54286C19.2857 2.32194 19.4648 2.14286 19.6857 2.14286C19.9066 2.14286 20.0857 2.32194 20.0857 2.54286V5.17143C20.0857 5.39234 19.9066 5.57143 19.6857 5.57143C19.4648 5.57143 19.2857 5.39234 19.2857 5.17143V2.54286ZM3.14286 2.14286C2.59057 2.14286 2.14286 2.59057 2.14286 3.14286V4.57143C2.14286 5.12371 2.59057 5.57143 3.14286 5.57143H9.14286C9.69514 5.57143 10.1429 5.12371 10.1429 4.57143V3.14286C10.1429 2.59057 9.69514 2.14286 9.14286 2.14286H3.14286Z" fill="white"/> </svg> <div id="boxStamina"></div> </div> <div id="voice"> <div class="fa-microphonebg"> </div> <i class="fas fa-microphone"></i> <div id="boxVoice"></div> </div> </div> </body> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="js/app.js" type="text/javascript"></script> </html>

Answer 1

your issue is right here:

radial-gradient(circle at 0% 50%, rgba(0,0,0,0) 50px, #fff 50px);

you need a pixel of separation between the transparent layer ( rgba(0, 0, 0, 0) )and the white layer ( #fff ) for this gradual curve to work:

radial-gradient(circle at 0% 50%, rgba(0,0,0,0) 50px, #fff 51px);

Should fix your issue. Radial gradients are tricky especially when you try to make some out-of-the-box shapes with them. :)