Как создать кривую хвостовую часть речевого пузыря с помощью CSS? ⇐ CSS

[Anonymous]

Я создаю речевой пузырь с помощью CSS, и я зашел так далеко.

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

.says{
width: 200px;
padding: 20px;
margin-right: 20px;
background: #BF7EF2;
color: #fff;
box-shadow: -3px 3px 5px #C1B9C8;
position: relative;
border-radius: 5px;
}

.says:before{
content: "";
position: absolute;
z-index: -1;
top: 14px;
right: -18px;
height: 20px;
border-right: 20px solid #BF7EF2;
border-bottom-right-radius: 25px 20px;
transform: translate(0, -4px);
box-shadow: -3px 3px 5px #C1B9C8;
}

.says:after{
content: "";
position: absolute;
z-index: -1;
top: 7px;
right: -18px;
width: 30px;
height: 30px;
background: #fff;
border-bottom-left-radius: 40px 35px;
transform: translate(0px, -20px);
}

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione aut facere cupiditate, sunt, nisi fugiat consectetur officiis veniam!

В основном я использовал :before и :after псевдокласс и примененный радиус границы. Затем накладывались друг на друга, чтобы достичь желаемого эффекта. Как видите, сейчас я использую фон: #fff в :after, потому что фон текущего родительского элемента белый. Это будет охватывать множество разных элементов div с разными цветами фона во всем моем приложении. И это проблема, с которой я столкнулся прямо сейчас.

Пример –




Могу ли я добиться того же «речевого «пузырь» хвост без использования свойства фона в :after?

^ Эта строка объясняет, что это не дубликат связанного вопроса.

Или какими-то другими совершенно другими способами?

Подробнее здесь: https://stackoverflow.com/questions/290 ... e-with-css