How to Make Comment Speech Bubbles Using Pure CSS
Today we’ll run through how to make speech bubbles using nothing but CSS (and our HTML of course). No images, no faff, no fluff and certainly no fom-toolery.
Without further ado…
First thing is first, we need our HTML.
<p>Hey I'm a speech bubble!</p>
<p>No way! So am I!!! :)</p>Nothing special there, just two incredibly simple lines of code containing some truly engaging conversation. Next up? Let’s get all into the CSS.
p {
background:#e8e8e8;
padding:20px;
margin:20px;
position:relative;
border-radius:5px;
}
p:after {
content:"";
width:0;
height:0;
border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #e8e8e8;
right:-20px;
position: absolute;
top:10px;
}Okay we’re just getting started, but the above code does two things. Firstly, it sets up our <p> tag to have a little padding, a little styling, something we can be proud to show mom. I’m also using the Open Sans font in my screenshots, but of course any font you want will work just fine. Secondly, we’re using the :after pseudo element to create a little triangle. Essentially, we create the triangle by making a content-less, 0 width, 0 height element with some fancy tweaks to our borders. The absolute positioning works specifically well for this application, but you may need to adjust top and right values depending on what the size of your paragraphs will be.
That gives us something like this:
Still, that’s a wee bit bland.
Let’s alternate things a bit. Try replacing your CSS with the following:
p {
background:#e8e8e8;
padding:20px;
margin:20px;
position:relative;
border-radius:5px;
}
p:nth-of-type(odd):after {
border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #e8e8e8;
border-left:none;
right:auto;
left:-20px;
}
p:after {
content:"";
width:0;
height:0;
border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #e8e8e8;
right:-20px;
position: absolute;
top:10px;
}Which gives us something like this:
We could go on and on, try adjusting the positioning and swapping out the borders on the :after triangles to get them to go vertically and horizontally. Add in an avatar or two, maybe a non-obtrusive time stamp and you’ve got yourself a smorgasbord of possibilities.
Up Next: How to Test Localhost on iPhone