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:-
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:-
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:-
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:-
Thanks for reading. Please, do not bother to create comments that contain advertisements. I am not going to publish them. Cheers 🙂