How to create a Speech bubble option for your website using CSS

Most of websites today anywhere some time requires speech bubbles. Speech bubble are mainly used for themes purposes were we need to to display some thing different from other part of contents(Include certain text such as tips of any information). With out any images we can create the speech bubble with CSS alone for your websites. The speech bubble creation is not a big task we can create it simply with a few line of css codes

The below given is the method of creating speech bubbles

Speech bubbles are rectangular box with the arrow. We can make it at different side left or right or may be in top of bottom depending upon our requirement. Here I am adding the code for an speech bubble with top left arrow

/* Speech bubble for your custom page starts  */
#identifier{
  position: relative;
  width: 305px;
  height: 140px;
  padding: 0px;
  background: #F2F6F7;
  border: #E2EAEC solid 2px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
#identifier:after {
  content: "";
  position: absolute;
  top: -15px;
  left: 33px;
  border-style: solid;
  border-width: 0 15px 15px;
  border-color: #F2F6F7 transparent;
  display: block;
  width: 0;
  z-index: 1;
}
#identifier:before {
  content: "";
  position: absolute;
  top: -18px;
  left: 32px;
  border-style: solid;
  border-width: 0 16px 16px;
  border-color: #E2EAEC transparent;
  display: block;
  width: 0;
  z-index: 0;
}
/* Speech bubble for your custom page ends */