You can customize the CSS3 bubble prompt box and css3 bubble of the arrow.

You can customize the CSS3 bubble prompt box and css3 bubble of the arrow.

Today, we will share a bubble prompt box based on pure CSS, similar to Tipso, a previously shared jQuery message prompt box plug-in. The entire prompt box consists of arrows and rectangular boxes, the arrow in the bubble prompt box can have different directions. This CSS bubble prompt box is completed by pure CSS. The biggest feature is that it can be customized, including the text color, background color, and arrow direction. As follows:

Download Online Preview source code

Implementation code.

Css code:

. Arrow_box {position: relative; background: #88b7d5; border: 4px solid # c2e1f5 ;}. arrow_box: after ,. arrow_box: before {bottom: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none ;}. arrow_box: after {border-color: rgba (136,183,213, 0); [......]

Via: http://www.w2bc.com/article/css3-genetate-arrow-please