Как я могу добиться изогнутого эффекта внизу страницы без необходимости сбрасывать шаблон градиента? ⇐ CSS

[Anonymous]

Я пытаюсь написать собственную копию примера веб-сайта для практики.
Как выглядит моя текущая страница


Эффект, который я хочу добавить (закругленные углы)


Мне просто нужен .nav-and-main чтобы завершить красивый эффект кривой, которая снова сливается с белым цветом страницы без необходимости повторного применения градиента (из-за чего она выглядит плохо спроектированной из-за внезапного изменения рисунка).

Код: Выделить всё

* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}

.nav-and-main {
background: rgb(34, 195, 93);
background: linear-gradient(50deg, rgba(34, 195, 93, 1) 0%, rgba(45, 75, 253, 1) 100%);
}

nav {
display: flex;
align-items: center;
gap: 60px;
height: 50px;
padding: 0 20px;
border-bottom: 1px solid rgb(255, 255, 255, 0.2);
}

.site-icon-name {
display: flex;
gap: 10px;
}

.site-icon {
height: 18px;
width: 18px;
border: 2px solid black;
border-radius: 5px;
box-shadow: 5px 5px black;
}

.site-directory {
display: flex;
gap: 20px;
}

.site-directory li a {
font-size: 12px;
color: white;
text-transform: uppercase;
font-weight: bold;
}

.site-directory li a:hover {
color: rgb(25, 41, 41);
}

.user-icon {
height: 22px;
width: 22px;
background-color: white;
border-radius: 50%;
margin-left: auto;
}

form {
position: relative;
}

.search-icon {
position: absolute;
top: 25%;
left: 10px;
}

.search-bar {
width: calc(100vw / 2);
height: 50px;
border-radius: 25px;
border: none;
padding-left: 35px;
}

.search-button {
position: absolute;
top: 15%;
left: 375px;
padding: 10px 20px;
background: rgb(34, 195, 93);
background: linear-gradient(50deg, rgba(34, 195, 93, 1) 0%, rgba(45, 75, 253, 1) 100%);
border: none;
border-radius: 25px;
color: white;
font-weight: bold;
}

.main {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin-top: 50px;
}

.main-headers {
text-align: center;
}

.main-title {
color: white;
font-size: 36px;
margin-bottom: 10px;
}

.main-subtitle {
color: rgb(25, 41, 41);
font-size: 16px;
}

.main-cards {
display: flex;
gap: 15px;
}

.main-card-1 {
height: 275px;
width: 250px;
background-color: white;
border-radius: 10px;
padding: 15px;
}

.code-img {
height: 100px;
width: 100px;
}

.main-card-2 {
height: 275px;
width: 350px;
background-image: url(./img/graph.jpg);
border-radius: 10px;
padding: 15px;
}

.curve {
height: 50px;
border-bottom-left-radius: 70px;
border-bottom-right-radius: 70px;
}

Код: Выделить всё

Topic


[list]
[*][url=#]home[/url]
[*][url=#]browse topics[/url]
[*][url=#]how it works[/url]
[*][url=#]faqs[/url]
[*][url=#]contact[/url]
[*][url=#]pages[/url]
[/list]

[img]./img/user-icon.png[/img]



Discover. Learn.  Enjoy
platform for creatives around the world


🔍

Search



[h4]Web Design[/h4]
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi iusto animi molestias temporibus cupiditate, labore quo architecto.
[img]./img/code.jpg[/img]

[h4]Finance[/h4]
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione nihil quae alias quisquam consectetur, sequi asperiores dignissimos enim quidem accusantium laudantium obcaecati fugit culpa.

Я попробовал следующее, рассчитывая получить белые углы:



Я попробовал следующее, ожидая получить белые углы:



Я попробовал следующее, ожидая получить белые углы:



Я попробовал следующее, ожидая получить белые углы: p>

• Создание элемента div с именем .curve внизу .nav-and-main высотой 50 пикселей. Я могу сделать нижний правый радиус границы и нижний левый радиус границы (который я смогу увидеть, если изменю цвет фона .curve на красный), но он по-прежнему включает градиент в углах, а не в белых углах. Установка белого фона изменяет весь элемент div .curve, а не углы.
• Добавление двух элементов div в элемент div .curve, сделав их белыми квадратами, поместив их в оба угла и изменив z-index.
• Добавление отступов в нижнюю часть .main и изменение радиуса границы вместо использования .curve
• Использование псевдоэлементов div для .curve и изменение z-индексов
• Использование другого контейнера div вокруг .nav-and-main, чтобы проверить, получится ли белый цвет фона оставит углы .curve белыми, когда сверху будет применен градиент .nav-and-main.
• Размещение .curve в контейнере div и установка белого цвета фона контейнера

Подробнее здесь: https://stackoverflow.com/questions/786 ... ing-to-res