纯CSS实现虚线边框的气泡框

IE9+

HTML:
<div id="bigbox">
<span id="box2"></span>
<div id="box3">158xxxx2121</div>
</div>

CSS:
#bigbox{
// 这里是为了兼容处理标准浏览器与IE在 inline-block 元素间距之间的差别
font-size:0;
}
#box2{
// 设置为 inline-block，比使用 block更加简洁
display: inline-block;
// 将正方形旋转45度
// rotate() 属性与 border-radius 的浏览器支持度差不多，都是 IE9+
transform:rotate(45deg);
width:10px;
height:10px;
// 只显示正方形的两条相邻边
border-width:0 0 1px 1px;
border-color:red;
border-style:dashed;
// 这是为了遮住长方形对话框的一小段边，使两个形状显得更加衔接
background-color: #fff;
}
#box3{
display: inline-block;
width:100px;
height:22px;
margin-left:-6px;
border-radius:6px;
border:1px dashed red;
padding:6px;
font-size:18px;
}