Как я могу создать изогнутый разделитель Netflix Hero с помощью радиального градиента CSS? ⇐ Html

[Anonymous]

Я клонирую главный раздел Netflix и пытаюсь создать красный изогнутый разделитель между главным героем и разделом «В тренде сейчас». Направление и цвет кривой не соответствуют реальному сайту.
Что я хочу:

• Кривая изгибается вверх, как показано на: https://www.netflix.com/np/
• Цвета градиента соответствуют розовому/красному свечению Netflix.

Ниже приведен снимок экрана для нужного мне красного изогнутого разделителя:


Я получаю следующее:


Мой HTML Код:






Netflix Clone









Sign In





Unlimited movies, TV shows and more
Starts at USD 2.99. Cancel anytime.
Ready to watch? Enter your email to create or restart your membership



Get Started >









Trending Now






Мой CSS-код:
:root{
--netflix-red:#e50914;
--bg-dark:#000000;
--text-gray:#b3b3b3;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family: sans-serif;
background: var(--bg-dark);
color:#ffffff;
}

/* HEADER & NAVBAR */

.header{
position:relative;
min-height: 100vh;
color:#ffffff;
background:radial-gradient(
circle at top,
rgba(0,0,0,0.1) 0%,
rgba(0,0,0,0.6) 60%,
#000 100%
),
url("images/header.PNG") center / cover no-repeat;
overflow:hidden;
}

.nav{
position:relative;
z-index:2;
padding:1.5rem 3.5rem;
}

.nav-inner{
max-width: 1200px;
margin:0 auto;
display:flex;
align-items:center;
justify-content: space-between;
}

/* .logo{
height:36px;
} */

.btn-signin{
background: var(--netflix-red);
color:#ffffff;
padding:0.45rem 1rem;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
}

/* HERO SECTION */

.hero{
position:relative;
min-height:calc(100vh-80px);
display:flex;
align-items: center;
justify-content: center;
padding:3rem 1.5rem 5rem;
z-index:1;
}

.hero-overlay{
position:absolute;
inset:0;
background: radial-gradient(circle at top,transparent 0, rgba(0,0,0,0.6) 45%, #000 100%);
}

.hero-content{
position:relative;
max-height: 950px;
text-align:center;
z-index:1;
}

.hero-content h1{
font-size: clamp(2.5rem,4vw + 1rem,3.5rem);
font-weight: 900;
margin-bottom: 0.75rem;
}

.hero-content h2{
font-size:1.5rem;
font-weight:400;
margin-bottom: 0.75rem;
}

.hero-content p{
font-size: 1.1rem;
margin-bottom: 1.5rem;
}

/* EMAIL FORM - CSS GRID */
.hero-form{
display:grid;
grid-template-columns: minmax(0,2fr) auto;
gap:0.5rem;
max-width:700px;
margin:0 auto;
}

.hero-form input{
padding:0.9rem 0.75rem;
border-radius:4px;
border:1px solid #606060;
background:rgba(0,0,0,0.7);
color:#ffffff;
font-size:1rem;
}

.hero-form::placeholder{
color:#8c8c8c;
}

.btn-get-started{
padding:0.9rem 1.6rem;
background:var(--netflix-red);
border:none;
border-radius:4px;
color:#ffffff;
font-size: 1.1rem;
font-weight:700;
cursor:pointer;
white-space: nowrap;
display:inline-flex;
align-items: center;
justify-content: center;
}

.btn-get-started .arrow{
margin-left: 0.25rem;
}

.form-message{
margin-top:0.75rem;
font-size: 0.95rem;
color:var(--text-gray);
}

/* Concave Curve */
.header::after{
content:"";
position:absolute;
left:50%;
bottom:0; /* sit on the bottom edge */
transform:translateX(-50%);
width:140%;
height:100px;
background:
radial-gradient(ellipse at bottom,
rgba(255,15,79,0.9) 0%, /* bright pink */
#e50914 40%, /* Netflix red */
transparent 70%);
z-index: 0;
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... l-gradient