CSS curve wave background

Question

I am a new learner of html and css. I want to make my circle orange background curve wave using only css not using background-image or svg. Like the screenshot:

https://i.stack.imgur.com/rDQeY.png

Without using background image curve just css in (.circle-inner). But I am failed to making this. I am tried a lot. I upload my html and css code.

My html and css code:

Answer 1

I used Div Containers and CSS to reproduce your required results. Feel free to tweak as you need. First i made a div container with a border or 50% on all sides for our circle. Next i built 2 more divs with a border radius and gradient and rotated them to place to create the results. Hope it helps.

.circleContainer{
width:400px;
height:400px;
border-radius:50%;
background-color:#ffcc33;
margin-left:30%;
margin-top:5%;
position:absolute;
overflow:hidden;
transform:rotate(17deg);
}
.splitA{
width:100%;
height:40%;
float:left;
background-color:#cc0066;
}
.curveOne{
width:100%;
position:absolute;
height:60%;
float:left;
transform:rotate(-50deg);
margin-left:-13%;
margin-top:-7%;
border-bottom-left-radius:60%;
border-top-left-radius:0%;
background: linear-gradient(to bottom, red,  #cc0066); 
}
.curveTwo{
width:100%;
position:absolute;
height:60%;
float:left;
margin-left:20%;
margin-top:45%;
transform:rotate(-50deg);
border-bottom-right-radius:0%;
border-top-right-radius:40%;
background: linear-gradient(to top, #cc6600, #ff9933, #ffcc33); 
}

<div class="circleContainer">
<div class="splitA"><div class="curveOne"></div></div>
<div class="curveTwo"></div>
</div>