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;}

效果图：