CSS 实体三角箭头

实体三角箭头可以有很明显的元素间关系指示功能，如下图是简书网页中将鼠标放置在导航栏中的分享按钮上出现的效果，红色框中的即是实体三角箭头，这是用CSS实现的，利用 border。

Paste_Image.png

上述实体三角箭头的效果代码如下：

:before{
    content:"";
    position:absolute;
    right:100%;
    top:57px;
    width:0px;
    height:0px;
    border-top:10px solid transparent;
    border-right:10px solid white;
    border-bottom:10px solid transparent;
}

样式里面有几个关键的点，第一：必须设置 width 和 height 为0px，否则形状会变成梯形，第二：必须设置三个 border ，具体原理如下图：

css border

如果把border放大来看，其实每一条边都是梯形，当中的空白部分才是内容区域，那么如果内容区域高度为0，宽度也为0呢？

内容区域逐渐减小 内容区域为0时的border
这个时候，每一边的border都成了直角三角形，需要注意的是，在CSS中设置时，必须设置三个边的 border 才能有这种效果，其他两个没有用的边就可以设置成透明 transparent。