css-文本气泡效果

如图：

css

/* 正方形块 */
.counter { 
            position: absolute;
            background:#eeeff3;
            background:linear-gradient(white, #ebf6ff);
            background:-moz-linear-gradient(white, #ebf6ff);
            background:-webkit-linear-gradient(white, #ebf6ff);
            background:-o-linear-gradient(white, #ebf6ff);
            padding:5px 10px;
            border-radius:0.4em;
            box-shadow:inset 0 1px 0 rgba(255, 255, 255, 1),  0 2px 4px 1px rgba(0, 0, 0, 0.2),  0 1px 3px 1px rgba(0, 0, 0, 0.1);
            left:25%;        
            top:100px;       
            font-size:12px;
            width:90px;
            text-align:center; 
}

/* 下面的小三角 */
.counter:after {  
            content:"";
            position:absolute;
            width:8px;
            height:8px;
            background:#ebf6ff;
            transform:rotate(45deg);
            -moz-transform:rotate(45deg);
            -webkit-transform:rotate(45deg);
            -o-transform:rotate(45deg);
            left:50%;
            margin-left:-4px;
            bottom:-4px;
            box-shadow:3px 3px 4px rgba(0, 0, 0, 0.2),  1px 1px 1px 1px rgba(0, 0, 0, 0.1);
            border-radius:0 0 3px 0;
}

html

xxxx-xx-xx