css画三角形

偶然看到一个视频上，是这样画三角形的。但自己却没想明白原理，如果各位大神明白原理，请评论告知。谢谢。

<div></div>

<style type="text/css">
	div{
		position: absolute;
		border: 20px solid transparent;
		border-bottom-color: red;
	}
</style>

效果图：

当然，你也可以通过改变border-bottom-color的bottom为：top, left, right 来改变三角形朝向。