css自定义会话框

效果图图下：

 

 

 HTML代码：

<div style="background-color: transparent; border: 1px #DDDDDD solid; width: 200px; height: 100px;">
<div class="triangle">
   <div class="triangle-box"></div>
</div>
</div>

CSS代码：

.triangle{/* 三角形图片位置 */
   background-image: url(img/traintop.png);
   width: 20px; 
   height: 20px;
   background-position: center;
   position: relative;
   top: -14px;/* 只需修改这里就可以了 */
   left: 74px;
   background-size: 100%;
   float: left;
}
.triangle-box{/* 隐藏底部可修改 */
   background-color: white;
    width: 14px;
    height: 1px;
    float: left;
    top: 13px;
    left: 3px;
    z-index: 0;
    position: relative;
}