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

[Anonymous]

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

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

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


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


Мой код:

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

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

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

[url=#]Sign In[/url]





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

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