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


Tags: css,css3,css-shapes

Problem :

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-
enter image description here

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?



Solution :

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="http://i.stack.imgur.com/MYlKY.png" alt="enter image description here">


    CSS Howto..

    How to centrally assign a same CSS class to multiple elements, such as when using frameworks like Bootstrap?

    how to go bottom of a website like back to top using javascript?

    responsive CSS - How to I make padding adjust automatically when visiting my site with an iPhone?

    How to make three DIV align vertical if not enough space horizontal

    How to read from CSS files with jQuery

    CSS how to change the color of a link within a class

    How to target a child element of a multiple parent selector in SASS [duplicate]

    How to avoid text go below the icon with css?

    How to make a bullet list align with text in css?

    how to make the file input field wrap?

    How to keep floating labels floating after input. Pure CSS

    slideshow banner without using flash

    How do I force an image to be responsive using CSS so it stays in the same position?

    Bootstrap: How to make repeated divs go around a fixed div

    How do you get a Radio Button to change text color in html with jquery?

    How to create full height content section with fixed header and footer in CSS with scrollbar hidden if not required [closed]

    How to divide a border into 4 equal parts?

    How to only underline text element inside an element in CSS?

    How to change CSS (background-image) from JQuery in Rails?

    how to write css to reduce font size [duplicate]

    How to change angularJS's default css styles? Search box etc

    How to make better CSS ID rules

    How do I get css links to resolve correctly when adding a PathInfo value?

    how to place image on image?

    How to change a position of css sprite image?

    CSS bottom bar isn't correctly shown with chrome

    How to make outer columns same height with nested bootstrap grids

    CSS How to center a div horizontally

    How to rearrange these elements with CSS?

    how to add parent class in css file?