Half screen semi circle on left

Question

Is it possible to create a semi circle like the following with css?

If yes, can someone explain me how to do it or where can I find some tutorials to learn? My Menu and Footer are already in place. I just want to know how to draw semi circles similar to that ones and, the application can run in different screen sizes and the image of the semi circles should adapt to the screen size

<template>
    <v-container fluid class="semi-circle">
        
    </v-container>
</template>
<style>
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.semi-circle {
  width: 50%;
  height: 100%;
  background: #505c7b;
  border-radius: 0 100% 100% 0;
  box-shadow: inset -3.5rem 1px 0 #7d869c, 
                    3.5rem 1px 0 #bec2cd;
}


</style>

and my result:

Answer 1

This works, I've tested it, and I've also commented on the lines that I've changed. (3 lines)

Hope it helps you!

html, body {
  height:100%;
  margin:0;
}

.semi-circle {
  aspect-ratio: 1/1; /* 1:1 aspect-ratio, so the height we specified in the next line and width, becomes the same */
  height: 100vh; /* 100vh means the entire height of the viewport (viewport means the area which can be "viewed" */
  transform: translateX(-50%); /* using translateX we can move the circle, in the "X" axis (i.e., left-right direction), -50% of its size (negative to move it to the left), so half of the circle gets moved out of the screen */ 
  background: #505c7b;
  border-radius: 50%;
  box-shadow: inset -3.5rem 1px 0 #7d869c, 
                    3.5rem 1px 0 #bec2cd;
}

<div class="semi-circle"></div>