How to Create a Curve Tail for Speech Bubble with CSS

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

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="Sample Image">

How to make a curved triangle speech bubble with pseudo-elements?

you could use pseudo elements (and their trickery) to generate something similar to this:

---

div {  height: 200px;  width: 350px;  background: tomato;  margin: 50px;  position: relative;  display: inline-block;}div:before {  content: "";  position: absolute;  height: 40px;  width: 40px;  background: tomato;  bottom: 2%;  left: -15px;  border-radius: 0 0 100% 0;  -webkit-transform: rotate(35deg);  transform: rotate(35deg);}div:after {  content: "";  position: absolute;  height: 40px;  width: 10px;  background: white;  bottom: 7%;  left: -18px;  border-radius: 50%;  -webkit-transform: rotate(35deg);  transform: rotate(35deg);}

<div>Hello world</div>

Create Speech Bubble with CSS

I would create a circular pseudo-element, with a transparent background and border on only one side. Then use transform and position: absolute to manually set it in place.

You'll need to tweak the values depending on the desired size of the bubble and tail.

z-index: -1 hides the pseudo-element under its parent.

.bubble {  position: relative;  width: 50px;  height: 40px;    border-radius: 50%;    background-color: grey;}
.bubble::after {  position: absolute;  width: 40px;  height: 40px;    bottom: -2px;  left: -16px;    border-radius: 50px;  border-bottom: 8px solid grey;    transform: rotate(-55deg);  z-index: -1;  content: '';  }

<div class="bubble"></div>

create specific chat bubble shape with CSS

Here's a example based on Pure CSS speech bubbles by Nicolas Gallagher.

It uses overlapping pseudo-elements with border-radius to create the bubble's pointy curved stem. This may not be a pixel-perfect match to your mockup, but you can modify the values to improve the shape as desired.

body {
  background: lightgray;
  margin: 0;
}

.speech-bubble {
  position: relative;
  padding: 50px;
  margin: 1em 20px;
  text-align: center;
  color: black;
  background: white;
  border-radius: 30px;
}

.speech-bubble:before {
  content: "";
  position: absolute;
  z-index:-1;
  left: -22px;
  top: 0;
  width: 40px;
  border-bottom: 35px solid white;
  border-top-right-radius: 25px;
}

.speech-bubble:after {
  content: "";
  position: absolute;
  z-index:-1;
  left: -28px;
  top: -3px;
  height: 38px;
  width: 28px;
  background: lightgray;
  border-top-right-radius: 20px;
}

<div class="speech-bubble">Hello, world.</div>

How to make a curved triangle speech bubble with pseudo-elements?

you could use pseudo elements (and their trickery) to generate something similar to this:

---

div {  height: 200px;  width: 350px;  background: tomato;  margin: 50px;  position: relative;  display: inline-block;}div:before {  content: "";  position: absolute;  height: 40px;  width: 40px;  background: tomato;  bottom: 2%;  left: -15px;  border-radius: 0 0 100% 0;  -webkit-transform: rotate(35deg);  transform: rotate(35deg);}div:after {  content: "";  position: absolute;  height: 40px;  width: 10px;  background: white;  bottom: 7%;  left: -18px;  border-radius: 50%;  -webkit-transform: rotate(35deg);  transform: rotate(35deg);}

<div>Hello world</div>

Flip CSS bubble triangle position?

Do you mean this?

If you want to change geometry, you should to play with border-width and border-radius. Also I changed pseudo-class from :after to :before, and vice versa in elements and border-radius from right to left.

.rectangle-speech-border {  position:relative;  padding:50px 15px;  margin:1em 0 3em;  border:10px solid #5a8f00;  text-align:center;  color:#333;  background:#fff;  /* css3 */  -webkit-border-radius:20px;  -moz-border-radius:20px;  border-radius:20px;}
/* creates larger curve */.rectangle-speech-border:after {  content:"";  position:absolute;  z-index:10;  bottom:-40px;  left:400px;  width:20px;  height:30px;  border-style:solid;  border-width:0 0 10px 10px;  border-color:#5a8f00;  background:transparent;  /* css3 */  -webkit-border-bottom-left-radius:40px 50px;  -moz-border-bottom-left-radius:40px 50px;  border-bottom-left-radius:40px 50px;  /* reduce the damage in FF3.0 */  display:block;}
/* creates smaller curve */.rectangle-speech-border:before {  content:"";  position:absolute;  z-index:10;  left:370px;  width:50px;  height:30px;  bottom: -40px;  border-style:solid;  border-width:0 0 10px 10px;  border-color:#5a8f00;  background:transparent;  /* css3 */  -webkit-border-bottom-left-radius:40px 50px;  -moz-border-bottom-left-radius:40px 50px;  border-bottom-left-radius:40px 50px;  /* reduce the damage in FF3.0 */  display:block;}
/* creates a small circle to produce a rounded point where the two curves meet */.rectangle-speech-border > :first-child:before {  content:"";  position:absolute;  bottom:-40px;  left:425px;  width:10px;  height:10px;  background:#5a8f00;  /* css3 */  -webkit-border-radius:10px;  -moz-border-radius:10px;  border-radius:10px;}
/* creates a white rectangle to cover part of the oval border*/.rectangle-speech-border > :first-child:after {  content:"";  position:absolute;  bottom:-10px;  left:376px;  width:24px;  height:15px;  background:#fff;}

<blockquote class="rectangle-speech-border">    <p>This is a blockquote that is styled to look like a speech bubble</p></blockquote>

Curve border using clip path in css

Here is a different idea:

.tolltip {
  width: 147px;
  margin: auto;
  position: relative;
  padding: 10px;
}

.tolltip:before,
.tolltip:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border: 5px solid #fff;
}

.tolltip:before {
  top: 0;
  right: 0;
  border-radius: 15px 15px 15px 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 
     25px 100%,  /* 25px = after width + border width */
     25px calc(100% - 10px), /* 10px is simply a bigger value than border width */
     0    calc(100% - 10px), 
     0    100%);
}

.tolltip:after {
  top: 50%;
  width: 20px; /* adjust this */
  border-top: 0;
  border-right: 0;
  transform-origin: right;
  transform: skewY(-40deg); /* add this */
}

body {
  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 49, 1) 35%, rgba(0, 212, 255, 1) 100%);
}

<div class="tolltip">
  <h3>content</h3>
</div>

How to create custom chat icon using css only

This is a bit like what you have in your request.

.msg1,
.msg2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.msg1 {
  width: 30px;
  height: 25px;
  border-radius: 12px;
  background-color: #ff6781;
  color: white;
}

.msg2 {
  width: 35px;
  height: 23px;
  border-radius: 12px;
  border: 2px solid #ff6781;
  color: #ff6781;
}

.msg1 p,
.msg2 p {
  font-size: 14px;
}

.msg1:after {
  content: '';
  position: absolute;
  background-color: #ff6781;
  top: 89%;
  left: 35%;
  width: 3px;
  height: 7px;
  transform: rotate(-45deg);
}

.msg1:before {
  content: '';
  position: absolute;
  background-color: #ff6781;
  top: 89%;
  left: 48%;
  width: 3px;
  height: 7px;
  transform: rotate(45deg);
}

.msg2:after {
  content: '';
  position: absolute;
  background-color: #ff6781;
  top: 100%;
  left: 35%;
  width: 3px;
  height: 6px;
  transform: rotate(-45deg);
}

.msg2:before {
  content: '';
  position: absolute;
  background-color: #ff6781;
  top: 100%;
  left: 40%;
  width: 3px;
  height: 6px;
  transform: rotate(45deg);
}

<div class="msg1"><p>4</p></div>
<div class="msg2"><p>11</p></div>

How can I create a tooltip tail using pure CSS?

Here's an example with a box-shadow, all latest version browsers should support this

http://jsfiddle.net/MZXCj/1/

HTML:

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS:

body {font-family:Helvetica,Arial,sans-serif;}

#toolTip {
    position:relative;
}

#toolTip p {
    padding:10px;
    background-color:#f9f9f9;
    border:solid 1px #a0c7ff;
    -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}

#tailShadow {
    position:absolute;
    bottom:-8px;
    left:28px;
    width:0;height:0;
    border:solid 2px #fff;
    box-shadow:0 0 10px 1px #555;
}

#tail1 {
    position:absolute;
    bottom:-20px;
    left:20px;
    width:0;height:0;
    border-color:#a0c7ff transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

#tail2 {
    position:absolute;
    bottom:-18px;
    left:20px;
    width:0;height:0;
    border-color:#f9f9f9 transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

body {  font-family: Helvetica, Arial, sans-serif;}#toolTip {  position: relative;}#toolTip p {  padding: 10px;  background-color: #f9f9f9;  border: solid 1px #a0c7ff;  -moz-border-radius: 5px;  -ie-border-radius: 5px;  -webkit-border-radius: 5px;  -o-border-radius: 5px;  border-radius: 5px;}#tailShadow {  position: absolute;  bottom: -8px;  left: 28px;  width: 0;  height: 0;  border: solid 2px #fff;  box-shadow: 0 0 10px 1px #555;}#tail1 {  position: absolute;  bottom: -20px;  left: 20px;  width: 0;  height: 0;  border-color: #a0c7ff transparent transparent transparent;  border-width: 10px;  border-style: solid;}#tail2 {  position: absolute;  bottom: -18px;  left: 20px;  width: 0;  height: 0;  border-color: #f9f9f9 transparent transparent transparent;  border-width: 10px;  border-style: solid;}

<div id="toolTip">  <p>i can haz css tooltip</p>  <div id="tailShadow"></div>  <div id="tail1"></div>  <div id="tail2"></div></div>

---

Related Topics