Сделать цвет фона: прозрачным, не нарушая эффекта прозрачности на псевдоэлементе ⇐ Html

[Anonymous]

Я пытаюсь создать пузырь чата с «хвостом» с помощью CSS. Код работает нормально, когда цвет фона псевдоэлемента ::after соответствует цвету фона. Однако, когда я устанавливаю прозрачность, эффект хвоста нарушается. Вот пример:

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

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

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

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

Когда я меняю цвет фона в ::after на прозрачный, хвост отображается неправильно.
Как сделать так, чтобы элемент ::after плавно сливался с фоном? Есть ли способ сделать элемент ::after прозрачным или использовать другой подход для достижения желаемого эффекта?

Подробнее здесь: https://stackoverflow.com/questions/793 ... t-on-pseud