Css3 提示框

<div class="arrow_box"><span>xxy is a so cool boy</span></div>

css:

         div{
             width: 200px;
             height: 100px;
             margin-top: 100px;
             text-align: center;
         }
         div span{
             text-align: center;
             vertical-align: -34px;
             color: #5dff63;
         }

         .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:;
             width:;
             position: absolute;
             pointer-events: none;
         }

         .arrow_box:after {
             border-color: rgba(136, 183, 213, 0);
             border-bottom-color: #88b7d5;
             border-width: 30px;
             margin-left: -30px;
         }

         .arrow_box:before {
             border-color: rgba(194, 225, 245, 0);
             border-bottom-color: #c2e1f5;
             border-width: 36px;
             margin-left: -36px;
         }

图：

关于伪元素的使用是一门技巧。自己研究吧，哈哈哈哈！！！！