In this blog, I am explaining how we can create a speech bubble without using any type of image and javascript code. We can simply create a speech bubble with the help of CSS.

For creating a speech bubble we need a single line HTML code for that here i am using a HTML <p> tag.

<p class="demo">speech bubble</p>

Now we have to style this outer box with the help of below CSS code:-

p.demo {
  position: relative;
  width: 200px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: #fff;
  border: 8px solid grey;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: 3px 3px 4px grey
  -moz-box-shadow: 3px 2px 4px grey;
  box-shadow: 3px 3px 4px grey;
}

The main CSS property in above CSS code is position:relative it is used for speech bubble pointer.

Now we have to create a pointer for our bubble . We can do this with the help of image but here I am doing it with the help CSS as shown in below code.

p.demo:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 30px;
  top: 100px;
  border: 26px solid;
  border-color: grey transparent transparent grey;
}

By using abCSS css code we have created a triangle which will align to the bottom of our speech box.

Now we have to delete some part of it. we will do it with the help of below code.

p.demo:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 38px;
  top: 100px;
  border: 15px solid;
  border-color: #fff transparent transparent #fff;
}

Working demo:- https://jsfiddle.net/LfLr5jpL/24/