So erstellen Sie eine benutzerdefinierte geschwungene Randform mit Verlaufsstrich um ein Div ⇐ HTML

[Anonymous]

Ich muss einen Container erstellen, der eine benutzerdefinierte Randform hat – insbesondere eine gebogene „Beule“ auf der linken Seite – und der Rand muss einen linearen Farbverlauf (keine Volltonfarbe) verwenden. Die Form sollte so aussehen:
(hängen Sie hier Ihren hochgeladenen Screenshot an)
Das Hauptproblem besteht darin, dass Standard-CSS-Rahmen immer rechteckig sind und clip-path: polygon() nur gerade Kanten (keine Kurven) unterstützt, sodass ich diese glatte, geschwungene Vertiefung nicht reproduzieren kann.
Hier ist ein minimales Beispiel, das zeigt, was ich in der Form haben möchte:
Ich habe es mit versucht Rahmenradius und Pseudoelemente, konnte aber nicht herausfinden, wie man einen Verlaufsstrich entlang eines benutzerdefinierten kurvigen Pfads anwendet.
Hier ist eine grobe Version, die ich mit SVG erstellt habe (wenn dieser Ansatz richtig ist, wie kann ich die Reaktionsfähigkeit verbessern?):


Was ist die richtige und moderne Art, HTML-Inhalte in eine benutzerdefinierte gebogene Verlaufsrandform wie diese einzuschließen? Kann die SVG-Datei reaktionsfähig gemacht werden, während Form und Farbverlauf richtig ausgerichtet bleiben?

Code: Select all

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

Code: Select all

Your text here...