Web特效背后的笨拙实现 -- Tip箭头

效果

原理

原理分为两步：

1. 构造三角形

整体大小只用border来撑，将左右border颜色设置透明

width: 0;
height: 0;
border: 6px solid;
border-color:#000000  transparent;

顶部border宽度设置为0

border-top-width: 0;

2. 叠加三角形
   将相同尺寸的两个三角形叠加，并通过一定偏移显示出箭头形状（下图红色区域设置成白色就有效果了~）

   
   

代码

<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>