CSS border原理
一个div或者元素的border并不是我们直观意义上的一条有高度的线，而是一个等高梯形或者三角形（宽高为0时），可以看一下效果：
HTML:
<div class="arrow1"></div>
CSS:
.arrow1{
font-size:0; /*默认有高度会撑开,这里清楚高度*/
width:0;
height:0;
border-width:30px;
border-style:solid;
border-color:red blue green orange;
}
可以看到每一个方向的border都是一个三角形，那么我们只需把对应方向剩余其他方向的border设置为透明或者隐藏掉就可以得到任何方向的一个三角形了。
我们以一个下拉图标为示例，得到这样一个图标可以将border的左右和下边框改为透明，css改动如下：
.arrow1{
font-size:0; /*默认有高度会撑开,这里清楚高度*/
width:0;
height:0;
border-width:30px 30px 0;
border-style:solid dashed dashed;
/*左右下设为dashed为了兼容ie6*/
border-color:red transparent transparent;
}
如果我们想实现下图的效果该怎么办呢？很简单，做两个小三角，一个是背景色，一个是边框色，Java，然后利用定位重叠在一起，记住他们的定位要相差一个像素哦~
HTML:
<div class="message-box">
<span>你好啊,欢迎加入我们!</span>
<div class="triangle-border tb-border"></div>
<div class="triangle-border tb-background"></div>
</div>
.message-box {
position:relative;
width:240px;
height:60px;
line-height:60px;
background:#E9FBE4;
box-shadow:1px 2px 3px #E9FBE4;
border:1px solid #C9E9C0;
border-radius:4px;
text-align:center;
color:#0C7823;
}
.triangle-border {
position:absolute;
left:30px;
overflow:hidden;
width:0;
height:0;
border-width:10px;
border-style:solid dashed dashed;
}
.tb-border {
bottom:-20px;
border-color:#C9E9C0 transparent transparent;
}
.tb-background {
bottom:-19px;
border-color:#E9FBE4 transparent transparent;
}