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