Category Archives: HTML and CSS

Making a speech bubble with pure CSS

I wanted to make a chat bubble and found many tutorials on how to do it. However, I haven’t found a step by step tutorial to clearly explain the logic behind it. It has taken me a while to figure it out and as Einstein said, “If you can’t explain it to a six year old, you don’t understand it yourself.” The purpose of this tutorial is not to make you through the same pains in order to figure out how a chat bubble is done using pure CSS and HTML.

How to make a triangle

Let us make a square using four borders with different colors:-

This is the code:-

<!DOCTYPE html>
<html>
<head>
<style>
.square {
border-width: 20px;
border-bottom-color: orange;
border-top-color: red;
border-left-color: green;
border-right-color: yellow;
min-width: 20px;
min-height: 20px;
border-style: solid;
max-width: 20px;
max-height: 20px;

}
</style>
</head>

<body>
<div class=”square”></div>
</body>

</html>

This is the output:-

border-colors

Note how borders interlace. You could almost spot a triangle or a polygon. There is a red polygon, green polygon, yellow polygon and an orange polygon.

Now, let us try to turn width into 0. This is the code:-

<!DOCTYPE html>
<html>
<head>
<style>
.square {
border-width: 20px;
border-bottom-color: orange;
border-top-color: red;
border-left-color: green;
border-right-color: yellow;

border-style: solid;
width: 0;

}
</style>
</head>

<body>
<div class=”square”></div>
</body>

</html>

And this is the output:-

Untitled

And you can see four triangles: red triangle, green triangle, yellow triangle and an orange triangle.

Now we will only keep the red triangle:-

<!DOCTYPE html>
<html>
<head>
<style>
.square {
border-width: 20px;
border-bottom-color: transparent;
border-top-color: red;
border-left-color: transparent;
border-right-color: transparent;

border-style: solid;
width: 0;

}
</style>
</head>

<body>
<div class=”square”></div>
</body>

</html>

And this is the output:-

red-triangle

Now, let us create a square and put our triangle code in the after. Our code would look like this:-

<!DOCTYPE html>
<html>
<head>
<style>
.square {
background-color: red;
color: white;
font-size: 22;
width: 400px;
}
.square:after {
content:””;
border-width: 20px;
border-bottom-color: transparent;
border-top-color: red;
border-left-color: transparent;
border-right-color: transparent;

border-style: solid;
width: 0;

}
</style>
</head>

<body>
<div class=”square”>Hello Bubble Box World!</div>
</body>

</html>

And our output would look like this:-

Bubble Box

 

Thanks for reading. Please, do not bother to create comments that contain advertisements. I am not going to publish them.  Cheers :)