親要素に対して相対位置指定を行った上で、overflow
プロパティやheight
プロパティなどを指定することで、質問者さんの実現したいことは行えると思います(動作確認用リンク)。
HTML
1<body>
2 <div class="radius"></div>
3</body>
CSS
1body {
2 position: relative; /* 追記 */
3 overflow: hidden; /* 追記 */
4 height: 100vh; /* 追記 */
5 margin: 0; /* 追記 */
6 background-color: rgba(40, 56, 94, 1);
7}
8
9.radius {
10 background-color: rgba(157, 177, 202, 0.37);
11 top: 0;
12 bottom: 0;
13 left: 0;
14 right: 0;
15 position: absolute;
16 margin: auto;
17 height: 70%;
18 border-radius: 50%;
19 width: 160%;
20 transform: translateX(-19%);
21}
追記
もし、マウスのミドルボタンを押下したときにスクロール出来る現象を抑制したいのであれば、以下のように HTML, CSS を変更する(動作確認用リンク)か、
HTML
1<body>
2 <div class="wrapper">
3 <div class="radius"></div>
4 </div>
5</body>
CSS
1body {
2 /* 追記ここから */
3 position: relative;
4 height: 100vh;
5 margin: 0;
6 /* 追記ここまで */
7 background-color: rgba(40, 56, 94, 1);
8}
9
10.wrapper { /* 追記ここから */
11 position: absolute;
12 width: 100%;
13 height: 100%;
14 overflow: hidden;
15} /* 追記ここまで */
16
17.radius {
18 background-color: rgba(157, 177, 202, 0.37);
19 top: 0;
20 bottom: 0;
21 left: 0;
22 right: 0;
23 position: absolute;
24 margin: auto;
25 height: 70%;
26 border-radius: 50%;
27 width: 160%;
28 transform: translateX(-19%);
29}
background-image
プロパティとradial-gradient
関数を使用する(動作確認用リンク)と良いと思います。
CSS
1body {
2 height: 100vh;
3 margin: 0;
4 background: rgba(40, 56, 94, 1)
5 radial-gradient(
6 160vw 70vh,
7 rgba(157, 177, 202, 0.37) 50%,
8 rgba(40, 56, 94, 1) 50.3%
9 ) no-repeat;
10}