How to create a curve tail for speech bubble with CSS?

Question

I'm creating a speech bubble with CSS and I have reached this far.

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

<div class="says">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione aut facere cupiditate, sunt, nisi fugiat consectetur officiis veniam!</div>

Basically I have used :before and :after pseudo class and applied border-radius. Then overlapped each other to reach the desire effect. Right now as you can see, I'm using background: #fff on :after because the current parent's background is white. This will go over many different divs with different bg colors throughout my app. And this is the issue I'm having right now.

Example-

Can I achieve the same "speech-bubble" tail without using the background property on :after?
^ This line explains it's not a duplicate of linked question.

Or by any other completely different ways?

Answer 1

Love the solution here!! I recently used it in a project, but needed to use different directions proportionate to where on the screen it was being used. For this, I tracked 8 directional variations of this solution in testing, and didn't want the work to go to waste. Hope this helps!!

/** IGNORE THIS STUFF, JUST PEN SETUP **/
body {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.bubble-group {
  display: flex;
  flex-direction: row;
}
.bubble {
  display: block;
  position: relative;
  color: #ddd;
  border: 2px dashed #eee;
  background-color: transparent;
  width: 200px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bubble > span {
  position: absolute;
}


/** FOCUS ON STYLINGS BELOW **/

/* Default Stylings (Except border) */
.one:after,
.two:after,
.three:after,
.four:after,
.five:after,
.six:after,
.seven:after,
.eight:after {
  content: "";
  display: block;
  border: 1px dashed #e28cff;
  background-color: transparent;
  /* Probably want to position these aboslute to move them around */
}

/***** GROUP #1 Constants *****/
.one:after,
.two:after,
.three:after,
.four:after {
  width: 42px;
  height: 26px;
}

/** Top side (Notice Border-radius) **/
.one:after {
  /* W & H defined above */
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  box-shadow: 21px -9px 0px 8px #782893;
}
.two:after {
  /* W & H defined above */
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  box-shadow: -21px -9px 0px 8px #782893;
}

/** Bottom side (Notice Border-radius) **/
.three:after {
  /* W & H defined above */
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  box-shadow: -21px 9px 0px 8px #782893;
}
.four:after {
  /* W & H defined above */
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  box-shadow: 21px 9px 0px 8px #782893;
}

/***** GROUP #2 Constants *****/
/* Notice we swapped W and H */
.five:after,
.six:after,
.seven:after,
.eight:after {
  width: 26px;
  height: 42px;
}

/* Because of this adjustment, we also swapped offset values for the box-shadow */

/** Left side (Notice Border-radius) **/
.five:after {
  /* W & H defined above */
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  box-shadow: -9px -21px 0px 8px #782893;
}
.six:after {
  /* W & H defined above */
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  box-shadow: -9px 21px 0px 8px #782893;
}

/** Right side (Notice Border-radius) **/
.seven:after {
  /* W & H defined above */
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  box-shadow: 9px 21px 0px 8px #782893;
}
.eight:after {
  /* W & H defined above */
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  box-shadow: 9px -21px 0px 8px #782893;
}

<!-- Group #1 -->
<div class="bubble-group">
  <div class="bubble one"><span>1</span></div>
  <div class="bubble two"><span>2</span></div>
  <div class="bubble three"><span>3</span></div>
  <div class="bubble four"><span>4</span></div>
</div>

<!-- Group #2 -->
<div class="bubble-group">
  <div class="bubble five"><span>5</span></div>
  <div class="bubble six"><span>6</span></div>
  <div class="bubble seven"><span>7</span></div>
  <div class="bubble eight"><span>8</span></div>
</div>

https://codepen.io/nss5161/pen/abeBgvq

Answer 2

As webtiki says, you can get this result adapting my previous answer (Even though may be it is a little bit difficult)

.container {
  width:300px;
  margin:5px;
}
.test 
{
position: relative;
width: 300px;
height: 150px;
padding: 0px;
background: pink;
border-radius: 6px;
}

.test:after {
    content: '';
    top: 1px;
    right: -29px;
    position: absolute;
    border: 0px solid;
    display: block;
    width: 38px;
     height: 26px;
    background-color: transparent;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    box-shadow: -21px 9px 0px 8px pink;
}

<div class="container">
  <div class="test"></div>
</div>
<img src="https://i.sstatic.net/MYlKY.png" alt="enter image description here">