Creating an arrow box like chat application using css

Today, we are going to learn How to make a box with arrow in CSS like chat application. If you have used Facebook and Google chat applications, you may have been observed arrow pointed head at left and right of the div. Lets check the below screenshot, in case you haven't observed.

Learn How to make a box with arrow in CSS like chat application:

Lets see the complete source code that helps to build more understanding on arrow chat head design. Here we are using border and border-color property of the css to design arrow pointed head. Below CSS style-sheet design helps us to design left side pointed chat box head :