CSS简单实现一个箭头

如题，用简单几行css代码实现一个箭头。其实有很多不同的方法可以实现，比如旋转一个有背景颜色的div，再把多余的部门覆盖掉等等。在这里记录一下不同思路。

 Css代码：

div{
    width: 50px;
    height: 0px;
    border-top: 5px solid;
    border-right: 15px solid;
    border-bottom: 5px solid;
    border-color: transparent transparent transparent red;
}

Html代码：（就一个div）

<div></div>

效果图：

解析：

关键在于对边框的理解。首先给出一个div，四周加上边框，再放大边框看一看效果：

很明显了，把边框设置成不同颜色，可以看到边框与边框衔接处的公共部分，并不会说谁覆盖谁，而是各占一半部分，那跟箭头有什么关系呢？看下图：

 画的有点丑。如果延长左边框的斜线，忽略其他上右下边框，就是一个箭头了。如何延长呢？其实也就是缩短左右边框的长度，即缩短div高度，看看高度为0时的效果：

这时候箭头就出来了，如果需要一个指向右边的箭头，那就再把上右下三个边框颜色设置为透明，就OK了。

border-color: transparent transparent transparent red;

总结：

1. div边框理解
2. 透明色：transparent 

以上。