用HTML+CSS设置对话气泡

测试浏览器：IE10

主要部分：before和after选择器；用border画三角形。

HTML代码：

<div class="leftBubble">左边框设计</div>
</br>
<div class="rightBubble">右边框设计</div>

 

CSS代码：

.leftBubble {
    width:100px;
    height:40px;
    text-align: center;
    border-radius: 5px;
    background-color:green; 
}
.leftBubble:before {
    content: "\00a0";
    width: 0px;
    height: 0px;
    display: block;
    z-index: -1;
    position: relative;
    left: -15px;
    top: 10px;
    border-top: 10px solid transparent;
    border-right: 15px solid green;
    border-bottom:10px solid transparent; 
    border-left: 0px solid transparent; 
}
.rightBubble {
    width:100px;
    height:40px;
    text-align: center;
    border-radius: 5px;
    background-color:green; 
	line-height:40px; 
}
.rightBubble:after {
    content: "\00a0";
    width: 0px;
    height: 0px;
    display: block;
    z-index: -1;
    position: relative;
    left: 100%;
    top: -30px;
    border-top: 10px solid transparent;
    border-right: 0px solid transparent;
    border-bottom:0px solid transparent; 
    border-left: 15px solid green; 
}

不知道左边框里面的文字为什么不能垂直居中，设置了横高也不管用。只显示边框的效果修改下border的代码即可