Как разместить изогнутый хвост позади изображения ⇐ CSS

[Anonymous]

Я пытаюсь сделать так, чтобы изогнутый хвост находился за изображением, но не могу этого добиться. Я попробовал z-index, но он не работает.

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

.bubble {
position: relative;
height: 150px;
width: 255px;
margin-right: 5px;
border-radius: 25px 25px 0 25px;
border: 2px solid #fff;
background-image: url(https://ines-valdovinos.de/images/blog-bubble_teaser.jpg);
background-size: contain;
}

.bubble::after {
content: "";
position: absolute;
right: 0;
background-color: transparent;
bottom: -50px;
height: 50px;
z-index: 0;
width: 25px;
border-top-right-radius: 25px;
box-shadow: 0 -25px 0 0 #fff;
}

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

Я пробовал z-index 0 и -1, но это не так. работа.

Подробнее здесь: https://stackoverflow.com/questions/793 ... nd-the-img