CSS Speech bubbles

CSS speech bubbles

In this article, I’m going to show you guys how to create the different kinds of speech bubbles. In past creating a speech bubbles was consider as a very difficult task due to usage of the images in it. but now we can create the speech bubbles very easily by using CSS3 Properties.


Speech bubbles:
Speech bubbles are  very nice way to indicate the content in the web and now a days mostly the speech bubbles are used in chat rooms. and we can clearly see the speech bubbles used in  the whatsapp chat box and it gives a great look and effect.

Before jumping into the coding — let me explain the basic concept behind creating an speech bubble, First we need to consider a rectangle/box/circle and after that we need to incorporate the different shapes of triangles/circles to form the different kinds of the speech bubbles.

lets code

CSS speech bubbles

NOTE- Look at the above image, for creating the above rectangular speech bubbles,  I’m  going to use two classes ,  one class(class:box) is same for styling the rectangular box and one more class(class:sb1; class:sb2; class:sb3; class:sb4;) is for creating different triangles, which will vary for all rectangular speech bubbles.

.box {
  width: 300px;
  margin: 50px auto;
  background: #00bfb6;
  padding: 20px;
  text-align: center;
  font-weight: 900;
  color: #fff;
  font-family: arial;
  position:relative;
}


  1. Start with markup, For creating a simple speech bubble we need a single markup element, here I’m going with div element with two classes in it. one class is for styling the box and one more class is for creating the speech bubble triangle.
    css speech bubbles
  2. Check the styling for the class:box which I’ve mentioned above.
  3. Now style the same div element with class:sb1 ( this class is for creating the triangle for speech bubble), here I’m using :before pseudo element for creating the triangle.
    .sb1:before {
      content: "";
      width: 0px;
      height: 0px;
      position: absolute;
      border-left: 10px solid #00bfb6;
      border-right: 10px solid transparent;
      border-top: 10px solid #00bfb6;
      border-bottom: 10px solid transparent;
      right: -20px;
      top: 6px;
    }
    
  4. just by changing the top, left, bottom, right properties we can create the different kinds of the speech bubbles in this genre.

See the Pen speech bubbles by rajeshdn (@cool_lazyboy) on CodePen.0

CSS speech bubbles
NOTE- Look at the above image, for creating the above rectangular speech bubbles, I’m going to use two classes , one class(class:box1) is same for styling rectangular box and one more class(class:sb5; class:sb6; class:sb7; class:sb8;) is for creating different triangles, which will vary for all rectangular speech bubbles.

.box1 {
  width: 300px;
  margin: 50px auto;
  border: 4px solid #00bfb6;
  padding: 20px;
  text-align: center;
  font-weight: 900;
  color: #00bfb6;
  font-family: arial;
  position: relative;
}
  1. Start with markup, For creating a simple speech bubble we need a single markup element, here I’m going with div element with two classes in it. one class is for styling the box and one more class is for creating two triangles.
    css speech bubbles
  2. Check the styling for the class:box1 which I’ve mentioned above.
  3. Now here we need a two triangles, where one triangle will overlay on other triangle. for achieving this effect, I’m going with :after:before pseudo elements. Now style the same div element with class:sb5 ( this class is for creating the triangles for speech bubbles).
  4. I’m using :before pseudo element for creating the one triangle.
    .sb5:before {
      content: "";
      width: 0px;
      height: 0px;
      position: absolute;
      border-left: 10px solid #00bfb6;
      border-right: 10px solid transparent;
      border-top: 10px solid #00bfb6;
      border-bottom: 10px solid transparent;
      right: -20px;
      top: 6px;
    }
    
  5. Now I’m using :after pseudo element for creating one more triangle and by adjusting the top,right properties we can overlay this triangle on other triangle. and by given white border-color border-left: 7px solid #fff;border-top: 7px solid #fff;we can achieve the effect which we can see in above image.
    .sb5:after {
      content: "";
      width: 0px;
      height: 0px;
      position: absolute;
      border-left: 7px solid #fff;
      border-right: 7px solid transparent;
      border-top: 7px solid #fff;
      border-bottom: 7px solid transparent;
      right: -11px;
      top: 10px;
    }
  6. just by changing the top, left, bottom, right properties we can create the different kinds of the speech bubbles in this genre.

See the Pen BWxggN by rajeshdn (@cool_lazyboy) on CodePen.0

CSS speech bubbles
NOTE- Look at the above image, for creating the above rectangular speech bubbles, I’m going to use two classes , one class(class:box2) is same for styling rectangular box and one more class(class:sb9; class:sb10; class:sb11; class:sb12;) is for creating different triangles, which will vary for all rectangular speech bubbles.

.box2 {
  width: 300px;
  margin: 50px auto;
  border: 4px solid #00bfb6;
  padding: 20px;
  text-align: center;
  font-weight: 900;
  color: #00bfb6;
  font-family: arial;
  position: relative;
}
  1. Start with markup, For creating a simple speech bubble we need a single markup element, here I’m going with div element with two classes in it. one class is for styling the box and one more class is for creating two triangles.
    css speech bubbles
  2. Check the styling for the class:box2 which I’ve mentioned above.
  3. Now here we need a two triangles, where one triangle will overlay on other triangle. for achieving this effect, I’m going with :after :before pseudo elements. Now style the same div element with class:sb9 ( this class is for creating the triangles for speech bubbles).
  4. I’m using :before pseudo element for creating the one triangle.
    .sb9:before {
     content: "";
     width: 0px;
     height: 0px;
     position: absolute;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-top: 10px solid #00bfb6;
     border-bottom: 10px solid transparent;
     right: 50%;
     bottom: -23px;
    }
    
  5. Now I’m using :after pseudo element for creating one more triangle and by adjusting the bottom,right properties we can overlay this triangle on other triangle. and by given white border-color border-top: 10px solid #fff; we can achieve the effect which we can see in above image.
    .sb9:after {
     content: "";
     width: 0px;
     height: 0px;
     position: absolute;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-top: 10px solid #fff;
     border-bottom: 10px solid transparent;
     right: 50%;
     bottom: -18px;
    }
  6. just by changing the top, left, bottom, right properties we can create the different kinds of the speech bubbles in this genre.

See the Pen speech bubbles 1 by rajeshdn (@cool_lazyboy) on CodePen.0

CSS speech bubbles

Take a look at the above image, for creating the above rectangular speech bubbles, Just go through my first demo in this article and addition to this we need to add border-radius property to rectangular box that’s it.

See the Pen speech bubbles 3 by rajeshdn (@cool_lazyboy) on CodePen.0

CSS speech bubbles

  1. Look at the above image, for creating the above Circular speech bubbles, I’m going to consider a div element with class:circular-sb and two more div elements inside the parent div element.
  2. Now style the parent div element with class:circular-sb , this is the larger circle with content in it.
    .circular-sb {
      width: 250px;
      border: 5px solid #00bfb6;
      padding: 80px 0px;
      margin: 30px auto;
      border-radius: 50%;
      text-align: center;
      font-size: 24px;
      font-weight: 900;
      font-family: arial;
      position: relative;
      color: #00bfb6;
    }
    
    
  3. Now here we need a total of three circles, which we are going to incorporate into the parent circle. which we can see clearly in the above image. first we need to style the child div element with class:circle1 and then use the :before pseudo element to get the above effect by overlaying the pseudo element on it. and by using top, right, left, bottom properties we can place the child circles where ever we want in the parent element.
    .circle1 {
      border: 5px solid #00bfb6;
      position: absolute;
      width: 25px;
      padding: 20px;
      border-radius: 50%;
      right: -15px;
      bottom: 23px;
    }
    
    .circle1:before {
      content: "";
      position: absolute;
      width: 25px;
      padding: 20px;
      border-radius: 50%;
      right: 0px;
      bottom: 0px;
      background: #fff;
    }
    
  4. Now style the child div element with class:circle2
    .circle2 {
      border: 5px solid #00bfb6;
      position: absolute;
      width: 5px;
      padding: 10px 15px;
      border-radius: 50%;
      right: -60px;
      bottom: 5px;
    }
    
  5. Follow the above steps and we can create many different circular speech bubble.

See the Pen circular speech bubbles by rajeshdn (@cool_lazyboy) on CodePen.0

Check out the below demo, In which I’ve created few more different kinds of speech bubbles.



See the Pen different speech bubbles by rajeshdn (@cool_lazyboy) on CodePen.0

Author: Rajesh DN

Rajesh Dn is a UI developer at TCS. he likes exploring new technologies and likes hanging with friends and surfing youtube in his spare time.

Leave a Reply

Your email address will not be published. Required fields are marked *