How to create a curved speech bubble?
I would consider radial-gradient
to do this:
.userMsgBottom {
position: relative;
display: inline-block;
color:#fff;
max-width: 260px;
background-color: #2e7384;
margin: 30px;
padding: 7px;
border-radius: 6px;
}
.userMsgBottom:after {
content: "";
position: absolute;
bottom: 0;
right: -25px;
width: 40px;
height: 25px;
background: radial-gradient(25px at top right, #0000 99%, #2e7384 102%);
}
.userMsgBottom.left:after {
content: "";
position: absolute;
bottom: 0;
left: -25px;
width: 40px;
height: 25px;
background: radial-gradient(25px at top left, #0000 99%, #2e7384 102%);
}
<div class="userMsgBottom">
Some text here<br> Some text here<br> Some text here
</div>
<div class="userMsgBottom left">
Some text here<br> Some text here<br> Some text here
</div>
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 place curved arrow on top of your speech bubble?
You can use a radial-gradient
with a transparant circle to create the curved tip of the speech bubble. Apply it to the ::before
pseudo element of your bubble so it gets placed on top of your speech bubble div
.
.bubble::before {
content: '';
height: 30px;
width: 30px;
background: radial-gradient(circle at 100% 0, transparent 30px, cornflowerblue 0);
display: block;
margin-left: 100px;
}
.message {
padding: 10px 20px;
width: 300px;
background: cornflowerblue;
display: block;
font-family: sans-serif;
color: floralwhite;
font-size: 18px;
border-radius: 0 0 10px 10px;
}
<div class="bubble">
<div class="message">
<p>"Tell me and I forget. Teach me and I remember. Involve me and I learn."<p>
<small>Benjamin Franklin</small>
</div>
</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>
CSS speech bubble with rounded arrow
You could do something like this using transform: skew();
and border-radius
. I added z-index: -1
to the pseudo-element so it sits behind the <span>
(I'm assuming you will put text inside).
.speech-bubble { position: relative; background: #ff0d1e; display: inline-block; width: 239px; height: 95px; margin: 40px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.speech-bubble:after { content: ""; position: absolute; top: 25px; left: -32px; width: 70px; height: 30px; background-color: #ff0d1e; transform: skew(55deg); transform-origin: top right; border-radius: 15% 0 0 0 / 25%; z-index: -1;}
<span class="speech-bubble"></span>
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>
Related Topics
How to Add a Google Search Box to My Website
Send Form by Email and Track Responses in Spreadsheet
Applying CSS for Only Parent But Not to Children
How to Display Excel Sheet in HTML Page
How Might I Force a Floating Div to Match The Height of Another Floating Div
CSS I Want a Div to Be on Top of Everything
How to Tint an Image with HTML5 Canvas
Get Angular2 Routing Working on Iis 7.5
HTML Tab Interface Using Only CSS
Internet Explorer 8 Table Cell Width Bug with Colspan Set
Adding Double Quotes to a Paragraph with CSS
Is It Ok to Have Multiple HTML Forms with The Same Name
Disable Chrome Translation Bar on My Website