Using border characteristics to realize the effect of chat bubbles

Using the border feature, the realization of the triangle, very simple, we directly see the effect:

Html:

<div class= "Bubble-container" > Hello     <div class= "Bubble-tail" ></div></div>

Css:

. bubble-Container {            height:100px;            line-height:100px;            Margin-bottom:2em;            Padding-left:2em;            Background: #3EC22D;            position:relative;            Font-family: "Microsoft Jas Black";            Color:white;            Border-radius:10px;        }        . Bubble-container. bubble-Tail {            width:0px;            height:0px;            Position:absolute;            left:50px;            Border-width:15px;            Border-style:solid;            Border-color: #3EC22D transparent transparent transparent;        }

Using the border feature to achieve chat bubble effect