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

         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;

         }