CSS 对话框的实现

1 <div class="one">
2     <em></em><span></span>    
3     我是第一个对话框
4 </div>
5 <div class="two">
6     我是第二个对话框
7 </div>

 1 /*one CSS气泡框*/
 2 .one {
 3     position: relative; width: 300px; height: 100px; border: 3px solid #09f;
 4 }
 5 .one em, .one span{
 6     position: absolute; top: 100px; left: 20px; display: block; border-width: 15px; border-style: solid dashed dashed; 
 7 }
 8 .one em {
 9     border-color:#09F transparent transparent; 
10 }
11 .one span {
12     top: 96px; border-color:#FFF transparent transparent;
13 }

/*two 使用继承*/
.two {
    position: relative; width: 300px; height: 100px; border: 3px solid #f60; background: #fff;
}
.two::after {
    position:absolute; bottom: -12px; left: 20px; padding: 8px; border:inherit; border-left: none; border-top: none; content:""; background: inherit;
 -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);
}