1.用纯css绘制带三角型的气泡框，不适合用图片
2.绘制的原理：当width和height均为0时，bord不为0时，边界交换处以45度角平分。
例子：先画一个三角吧
.dr{
width:0px;
height:0px;
border:10px solid black;
border-bottom:10px solid red;
}
<div class=dr></div>
?结果：
?（1）当我们想要绘制朝上着上方的小三角，只要把黑色区域改为白色或透明即可。border：10px solid transparent 或：border：10px solid #fff
? ? (2)尖朝上的三角形 设置 border-bottom 所以朝左border-right 朝右 border-left 朝下 border-top
3.我们已经绘画了三角型，但是我们要的是三角形边框，改怎么做呢？
思路：外边是一个实的三角形，用上面的方法绘制，里面在做一个小三角形叠在里面，颜色是白色，比外面的三角形小一点点，这样不就留下框了么。
<style>
.content{
width:0px;
height:0px;
border:10px solid black;
border-bottom:10px solid red;
}
.inner{
width:0px;
height:0px;
border:10px solid yellow;
border-bottom:10px solid red;
}
</style>
</head>
<body>
<div class="content">
<div class="inner">
</div>
</div>
</body>
?
?4.经过大神的点播，利用：before和after 来实现这个更方便些
<style>
.content{
width:0px;
height:0px;
border:10px solid transparent;
border-bottom:10px solid red;
margin-left:10px;
}
.content:after{
content:"";
display:block;
width:0px;
height:0px;
border:10px solid transparent;
border-bottom:10px solid white;
position:relative;
top:-9px;
left:-10px;
}
</style>
?结果：
?
?
?
