Как создать собственную изогнутую форму границы с градиентной обводкой вокруг элемента div ⇐ Html

[Anonymous]

Мне нужно создать контейнер с собственной формой границы — в частности, изогнутым выступом с левой стороны — и граница должна иметь линейный градиент (а не сплошной цвет). Форма должна выглядеть следующим образом:
(прикрепите сюда загруженный снимок экрана)
Основная проблема заключается в том, что стандартные границы CSS всегда прямоугольные, а clip-path: Polygon() поддерживает только прямые края (без кривых), поэтому я не могу воспроизвести этот плавный изогнутый отступ.
Вот минимальный пример, показывающий, что я хочу внутри фигуры:
Я попробовал использовать border-radius и псевдоэлементы, но не смог понять, как применить градиентную обводку вдоль пользовательского изогнутого пути.
Вот приблизительная версия, которую я создал с использованием SVG (если этот подход верен, как мне улучшить отзывчивость?):


Каков правильный и современный способ обернуть HTML-содержимое внутри пользовательской формы изогнутой градиентной границы, такой как эта? Можно ли сделать SVG отзывчивым, сохраняя при этом правильное выравнивание формы и градиента?

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

.bubble {
--border: 2px;
--radius: 24px;
--gradient: linear-gradient(90deg, #3cabff, #ff83f0);
padding: 16px 22px;
border-radius: var(--radius);
background: white;
position: relative;
background:
var(--gradient) border-box,
white padding-box;
border: var(--border) solid transparent;
mask:
linear-gradient(#fff 0 0) padding-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
}

.bubble::after {
content: "";
position: absolute;
right: -14px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border-radius: 0 50% 50% 0 / 50%;
background:
var(--gradient) border-box,
white padding-box;
border: var(--border) solid transparent;
mask:
linear-gradient(#fff 0 0) padding-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
}

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

Your text here...

Подробнее здесь: https://stackoverflow.com/questions/798 ... ound-a-div