这样的下三角气泡框用纯css3如何实现

Question

这样的下三角气泡框用纯css3如何实现,如图

Answer 1

用Border画就行

div:after

{

 content:'';

border:20px solid transparent;

border-top-color:#fff;

position:absolute;

left:50%;

margin-left:-20px;

width:0;

}

Answer 2

如果只是视觉上的这种效果，小面一个小的div有2个虚线边框在旋转45度绝对定位到那个大的虚线DIV上即可如：
.d1{

position: relative;
border: 1px dashed #999;
background: #fff;
width: 150px;
height: 100px;

}
.d1 span{

display: block;
width: 20px;
height: 20px;
position: absolute;
border-right:1px dashed #999;
border-bottom:1px dashed #999;
transform: rotate(45deg);
bottom: -10px;
left: 50%;
margin-left:-15px;
background: #fff;z-index: 99;

}