Создайте изогнутый вырез с градиентным цветом внизу в CSS. ⇐ CSS

[Anonymous]

Я следую коду по ссылке
https://dev.to/karimshalapy/how-to-make ... lement-a2j и получаю идеальную изогнутую форму вырезать. Но я не могу изменить цвет фона на цвет нижнего градиента. Ниже мой код

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

.curout {
--circle-r: 22px;
--big-circle-r: 20px;
--pillar-size: max(22px, var(--circle-r));
--card-color: linear-gradient(to bottom, #1a1a1a, #8b4513);
border-radius: 20px;
}
.card {
--circle-offset: calc(
var(--big-circle-r) + var(--pillar-size) + var(--circle-r)
);
--filler: conic-gradient(
at right var(--circle-r) top var(--circle-r),
#0000 25%,
var(--card-color) 0
);

position: relative;
border-top-right-radius: 0;
background:
/* Big Circle Cutout */ radial-gradient(
var(--big-circle-r) at 100% 0%,
#0000 98%,
var(--card-color)
)
calc(-1 * var(--pillar-size)) var(--pillar-size),
radial-gradient(
var(--circle-r) at top var(--circle-r) right var(--circle-offset),
#00ffff 98%,
#0000
),
/* Right Circle */
radial-gradient(
var(--circle-r) at right var(--circle-r) top var(--circle-offset),
#00ffff 98%,
#0000
),
var(--filler) calc(-1 * (var(--big-circle-r) + var(--pillar-size))) 0,
var(--filler) 0 calc(var(--big-circle-r) + var(--pillar-size));
background-repeat: no-repeat;
}

/* linear-gradient(to bottom, #1a1a1a, #8b4513), */

Это не сработает, если цвет карты такой, как #ff0000 или #00ffff, это будет идеально. Любой может мне помочь. Спасибо

Подробнее здесь: https://stackoverflow.com/questions/790 ... tom-in-css