效果
原理
原理分为两步：
- 构造三角形
整体大小只用border来撑，将左右border颜色设置透明
width: 0;
height: 0;
border: 6px solid;
border-color:#000000 transparent;
顶部border宽度设置为0
border-top-width: 0;
-
叠加三角形
将相同尺寸的两个三角形叠加，并通过一定偏移显示出箭头形状（下图红色区域设置成白色就有效果了~）
代码
<style type="text/css">
.arrow-container{
position: relative;
}
.arrow-before,.arrow-after
{
position: absolute;
display: block;
width: 0;
height: 0;
overflow: hidden;
border: 6px solid;
border-top-width: 0;
}
.arrow-before {
border-color:#dadee7 transparent;
}
.arrow-after {
top:1px;
border-color:#ffffff transparent;
}
</style>
<div class="arrow-container">
<div class="arrow-before"></div>
<div class="arrow-after"></div>
</div>
