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-
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?

@web-tiki The linked question has the answer where he is also using background property on :after but this is not the case here. I don't want to use background as I stated at the end of my question. It's a different scenario and I think is not a duplicate. — aniskhan001
– aniskhan001, Commented Mar 14, 2015 at 17:00
I see what you mean, the accepted answer doesn't work on serveral background colors but the ones provided by vals and TylerH do. — web-tiki
– web-tiki, Commented Mar 14, 2015 at 17:08
@web-tiki I have achieved the same as vals earlier however the shape here I'm using is different. The sharp edge of the tail is somewhere middle of it's other side. And TylerH's one is not curved, it's an straight triangle. — aniskhan001
– aniskhan001, Commented Mar 14, 2015 at 17:18

vals · Accepted Answer · 2015-03-14 18:49:52Z

14

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">

answered Mar 14, 2015 at 18:49

vals

64k11 gold badges96 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aniskhan001 Over a year ago

Thanks! I got the idea now. Just needed to fine-tune some properties to match my expectation. I will edit the answer to my preferred style.

Itay Over a year ago

This is amazing!!

Midnight Flash Moon Laser · Accepted Answer · 2024-10-11 04:44:54Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related