How to create curve and circle in css and html5? - html

Question

I'm new to the css world and I'm trying to make a responsive design like this using bootstrap, css and html5
for more information here is an illustration:
curve
how to create the same curve and a circle above? i really need help i try everything but it doesn't work
a little help will be really good

Answer 1

You have two options, the better is to use SVG (I would go for this one if its me), also you can implement something like you provided in HTML but not every shape is possible to have using HTML, if curve and circles all you need then, something like can be implemented:
.main {
border-radius: 50%;
width: 300px;
height: 300px;
background: red;
padding: 50px;
position:absolute;
top:-240px;
}
.inner {
border-radius: 50%;
width: 300px;
height: 300px;
background: white;
}
.innerWhite {
border: 1px solid 50px;
border-radius: 50%;
width: 50px;
height: 50px;
background: white;
position: absolute;
bottom: 45px;
}
<div class="main">
<div class="inner">
<div class="innerWhite"></div>
</div>
</div>

Answer 2

You can use radial-gradient combined with mask:
.box {
height:300px;
max-width:1024px;
margin:auto;
border:1px solid red;
position:relative;
}
.box::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:radial-gradient(circle 1800px at 50% -840px,transparent 53.8%,red 54% 60.8%,transparent 61%);
-webkit-mask:radial-gradient(circle at 20% 70%, transparent 80px,#fff 81px);
mask:radial-gradient(circle at 20% 70%, transparent 80px,#fff 81px);
}
body {
background:url(https://i.picsum.photos/id/1000/800/800.jpg) center/cover;
}
<div class="box"><div>