如何将div背景设置为椭圆形？

Question

我正在尝试将索引页div设置为椭圆形。 我设法用border-radius做到了，但是问题是边缘是 太圆了，不是我所期望的。

这是我的预期结果

css末尾的链接

<div class="home-page"></div>

.home-page {
    z-index: 0;
    display: grid;
    grid-template-rows: 14vh max-content 18vh; 
}

.home-page::before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    height: 83vh;

    background-image: linear-gradient(215deg, #3f2b96, #a8c0ff);
    border-bottom-left-radius: 50% 75px;
    border-bottom-right-radius: 50% 75px;
}

Answer 1

尝试添加边框半径100％/ 50％