CSS气泡框的两种实现

方法一：

<div class="disNone">                           
                                    <span class="top"></span>     
                                    <img src="img/footer-appdownload (1).png" alt="苹果下载"/>  
                                </div> 

/*气泡框效果实现*/  
.footer .footerArea .footerRight ul li a:hover .disNone span{  
    width:0;   
    height:0;   
    font-size:0;   
    overflow:hidden;   
    position:absolute;  
}  
.footer .footerArea .footerRight ul li a:hover .disNone span.top{  
    border-width:13px;   
    border-style:solid dashed dashed;   
    border-color:#ffffff transparent transparent;   
    left:46px;   
    bottom:-23px;  
}  

效果图：

方法二：

将div设置为正方形，并旋转一定度数成为菱形，在设置菱形上半部分位置与对话框位置重合，则形成如图所示的气泡框。

除此之外，还可以设置气泡div的border-radius，并设置菱形旋转角度与位置，构成气泡框。若对话框是矩形，则旋转45度即可。

<div id="" class="qipao">
			这是气泡框demo
		</div>
		<div class="demo"></div>

.qipao{
	width: 200px;
	height: 60px;
	margin: 20px 0 20px 200px;
	background: #69A6D1;
	text-align: center;
	padding-top: 40px;
	font-size: 16px;
	border-radius: 50%;
}
.demo{
	width: 38px;
	height: 38px;
	background: #69A6D1;
	transform: rotate(70deg);
	margin-left: 230px;	
	margin-bottom: 200px;
	margin-top: -60px;
}

效果图：