Hintergrundfarbe transparent machen, ohne den Transparenzeffekt des Pseudoelements zu unterbrechen ⇐ HTML

[Guest]

Ich versuche, mithilfe von CSS eine Chat-Blase mit einem „Schwanz“ zu erstellen. Der Code funktioniert einwandfrei, wenn die Hintergrundfarbe des Pseudoelements ::after mit der Hintergrundfarbe übereinstimmt. Wenn ich es jedoch auf transparent stelle, bricht der Schwanzeffekt ab. Hier ist ein Beispiel:

Code: Select all

.tail::before,
.tail::after {
bottom: -0.1rem;
content: "";
height: 1rem;
position: absolute;
}

.tail::before {
border-bottom-left-radius: 0.8rem 0.7rem;
border-right: 1rem solid #248bf5;
right: -0.35rem;
transform: translate(0, -0.1rem);
}

.tail::after {
background-color: #fff;
border-bottom-left-radius: 0.5rem;
right: -40px;
transform: translate(-30px, -2px);
width: 10px;
}

.tail2::before,
.tail2::after {
bottom: -0.1rem;
content: "";
height: 1rem;
position: absolute;
}

.tail2::before {
border-bottom-left-radius: 0.8rem 0.7rem;
border-right: 1rem solid #248bf5;
right: -0.35rem;
transform: translate(0, -0.1rem);
}

.tail2::after {
background-color: transparent;
border-bottom-left-radius: 0.5rem;
right: -40px;
transform: translate(-30px, -2px);
width: 10px;
}

.tail3::before,
.tail3::after {
bottom: -0.1rem;
content: "";
height: 1rem;
position: absolute;
}

.tail3::before {
border-bottom-left-radius: 0.8rem 0.7rem;
border-right: 1rem solid #248bf5;
right: -0.35rem;
transform: translate(0, -0.1rem);
}

.tail3::after {
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
border-bottom-left-radius: 0.5rem;
right: -40px;
transform: translate(-30px, -2px);
width: 10px;
}

Code: Select all

This is a test message with white




This is what happens when I try to make it transparent




This is the desiered result I want using transprancy

Wenn ich die Hintergrundfarbe in ::after in transparent ändere, wird die tail wird nicht richtig angezeigt.
Wie kann ich dafür sorgen, dass das ::after-Element nahtlos mit dem Hintergrund verschmilzt? Gibt es eine Möglichkeit, das ::after-Element transparent zu machen oder einen anderen Ansatz zu verwenden, um den gewünschten Effekt zu erzielen?