CSS3 provides us a lot of new ways to experiment with styling the elements on our page, and with the addition of rounded corners, things that used to take images can be made with very little effort. Using CSS over images can also improve the load time of your pages, so learning to create shapes in pure CSS is a definitely an asset to your web development toolbox. Today we’ll learn how to create a dialogue bubble in CSS, which is a great way to learn to create circles and triangles. Let’s get started!

STEP ONE:

The HTML

We’ll be creating our dialogue bubble by using 3 Divs. We’ll use one Div to simply wrap the other 2 in, one for the circle part of the bubble, and one for the triangle part of the bubble. In order to keep our page semantic, we’ll use wrapper, circle, and bubble as our IDs for the Divs. Here’s what the HTML looks like:

Great! Our Divs are now set up to begin creating our dialogue bubble. Let’s jump into the CSS:

STEP TWO:

The CSS

As mentioned, in order to create our dialogue bubble we’ll need to create an oblong circle, and a small triangle to place underneath it. First, let’s style the wrapper with a height, a width, and a border so that we can see visually how much space we have to work with. Here’s what the first bit of CSS should look like:

RESULT 1
Result One

Now you can see that we’re working with a fairly large amount of space, and having the border on our wrapper will help us to better see where we’re positioning things within it. Once we’re done, we’ll remove the border so that only the dialogue bubble is visible. Let’s start creating the bubble now. We’ll need our Div to have rounded corners so that it appears as a circle. Let’s also give it a border, a height, and a width so that we can see the outline of our circle. Here’s the next iteration in the CSS:

RESULT 2
Result Two

Our “circle” Div still looks like a square, so we need to go into the CSS again and add our border-radius values for each of the major browsers. Here’s what the CSS should look like now:

RESULT 3
Result Three

Now, you’ll see that our shape Div is no more a square, and it has become the circle Div that we always wanted it to become. Things are “shaping up” rather nicely, unlike my ability to write a decent pun. Let’s position our circle a little bit closer to the center of the wrapper using the left and top properties. Check out the CSS and change yours to the following:

So now we have the circle part of our bubble closer to the center of the wrapper. Let’s start creating the triangle that will be under our circle. After writing the following code, you’ll see a small triangle appear inside of the circle. We’ll still need to position it, which we’ll do a bit later. Here’s how you create the triangle:

RESULT 4
Result Four

Now, we can go ahead and position our triangle. We’ll want it to be towards the bottom of the circle, and we’ll be using relative positioning to change where it’s at. Here’s the next iteration in the CSS for our triangle:

RESULT 5
Result Five

Now’s a good time to go ahead and take a look at our dialogue bubble to see the progress we’ve made. You should be able to see the box starting to take form and look more like a dialogue bubble. Let’s go ahead and add some color to our circle:

The dialogue bubble is finished, and now if you take a look at it in the browser you can fully bask in its glory. Here’s what the finished product should look like:
Final Result

CSS provides us enough capability to create graphics without the use of images and fancy software. Everywhere you look nowadays you’ll see rounded corners, and now you know how to use them and actually do something with them. Join us next time when we show you how to create a “deck” of playing cards in pure CSS. See you then!

Download Source Files