css实现tips不同方向浮框小三角

.tri_top, .tri_right, .tri_bottom, .tri_left{
               width: 150px;
               height: 100px;
               background: #CCCCCC;
               border-radius: 8px;
               margin: 50px 50px;
               position: relative;
               float: left;
           }
           .tri_top:before{
               content: "";
               width: 0px;
               height: 0px;
               border-left: 10px solid transparent;
               border-right: 10px solid transparent;
               border-bottom: 10px solid #CCCCCC;
               position: absolute;
               top: -10px;
               left: 65px;
           }
           .tri_right:before{
               content: "";
               width: 0px;
               height: 0px;
               border-top: 10px solid transparent;
               border-bottom: 10px solid transparent;
               border-left: 10px solid #CCCCCC;
               position: absolute;
               top: 40px;
               left: 150px;
           }
           .tri_bottom:before{
               content: "";
               width: 0px;
               height: 0px;
               border-top: 10px solid #CCCCCC;
               border-left: 10px solid transparent;
               border-right: 10px solid transparent;
               position: absolute;
               top: 100px;
               left: 70px;
           }
           .tri_left:before{
               content: "";
               width: 0px;
               height: 0px;
               border-top: 10px solid transparent;
               border-bottom: 10px solid transparent;
               border-right: 10px solid #CCCCCC;
               position: absolute;
               top: 40px;
               left: -10px;
           }