title: How to create a curve tail for speech bubble with CSS?
body: <p>I'm creating a speech bubble with CSS and I have reached this far.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="says"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione aut facere cupiditate, sunt, nisi fugiat consectetur officiis veniam!&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Basically I have used <code>:before</code> and <code>:after</code> pseudo class and applied <code>border-radius</code>. Then overlapped each other to reach the desire effect. Right now as you can see, I'm using <code>background: #fff</code> on <code>:after</code> 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.</p>
  
  <p><em>Example-</em>
  <br>
  <img src="https://i.stack.imgur.com/MYlKY.png" alt="enter image description here"></p>
  
  <p>Can I achieve the same "speech-bubble" tail without using the background property on <code>:after</code>?<br>
  <strong><em>^ This line explains it's not a duplicate of linked question.</em></strong></p>
  
  <p>Or by any other completely different ways?</p>