Create Close-up Half Circle in HTML CSS-CodePudding

I was ask to create half circle-like design for my project in html css , its look like this :

Figma Design but it really ""zoomed"in.

i tried to make it and the closest i could look like this : My Closest

with this code :

.semi-circle {
  transform: translate(0, 0);
  height: 150px;
  width: 100%;
  border-radius: 0 0 150px 150px;
  /* border-radius: 0 0 150px 150px;  */
  background-color: #0E47A1;
}

<div ></div>

what can i tweak and how to make it like the designed one

CodePudding user response：

Heres some idea for you. you can set it to transform then rotate it at the same time put a fake div at the top so you can cover all remaining blue. Let me know.

body {background-color:lightgrey;}

.semi-circle { 
  height: 200px; 
  width: 200px; 
  border-radius : 50%;             
  background-color: #0E47A1; 
  margin-top:0px;
  transform: scale(1.5) rotateX(105deg);  
  overflow:hidden;
  align-items:center;
  margin-left:50px;

} 

.box { 
  width: 300px;
  height: 800px;
  border:1px solid gray;
  background-color:white;
  }
 
.blue {
  background-color:#0E47A1;
  height:100px;
  }

.whitebox {
  width:220px;
  height:40px;
  line-height:1;
  margin:0 auto;
  box-shadow: 2px 2px 4px 2px gray;
  text-align:center;
  padding:10px;
  border-radius:20px;
  position:absolute;
  top:120px;
  left:40px;
  background-color:white;
  }

<body> 
  
 <div>Home</div>
 
  <div >
  <div >
   <div ></div> 
    <div >Hello Visitors!
     <span>this is the hidden text......</span>
    </div>
   </div>
  </div>
 </body>

CodePudding user response：

I have used ::after to create the effect, you can change the height get desired curve.

.curve{
  position: relative;
  width: 300px;
  height: 200px;
  margin: auto;
  overflow: hidden;
}
.curve::after{
  content: "";
  position: absolute;
  top: 0px;
  left: 50%;
  border-radius:50%;
  background: blue;
  width:500px;
  height:300px;
  transform: translate(-50%, -50%);
}

<div ></div>

CodePudding user response：

This looks like the example. It is responsive and will fit like that on any screen.

.semi-circle {
  transform: translate(0, 0);
  height: 150%;
  width: 150%;
  border-radius: 50%;
  /* border-radius: 0 0 150px 150px;  */
  background-color: #0E47A1;
  position: absolute;
  top: -90%;
  left: -22.5%;
}

body {
  overflow: hidden;
}

<div ></div>