时间戳

首页 > 解决方案 > 如何将div背景设置为椭圆形？

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

问题描述

我正在尝试将我的索引页 div 设置为椭圆形。我设法用边界半径做到了这一点，但问题是边缘太圆了，不像我预期的那样。

这是我的预期结果

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;
}

标签： htmlcss

解决方案

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

推荐阅读