Effective前端3：用CSS画一个三角形

三角形的场景很常见，打开一个页面可以看到各种各样的三角形：
三角形应用场景

由于div一般是四边形，要画个三角形并不是那么直观。你可以贴一张png，但是这种办法有点low，或者是用svg的形式，但是太麻烦。三角形其实可以用CSS画出来。如上图提到，可以分为两种三角形，一种是纯色的三角形，第二种是有边框色的三角形，先介绍最简单的纯色三角形。

1. 三角形的画法

三角形可以用border画出来，首先一个有四个border的div应该是这样的：

然后把它的高度和宽度去掉，剩下四个border，就变成了：

再把border-top去掉，没有了border-top就把上面的区域给裁掉了：

接下来，再让左右两边的border透明，就是一个三角形了：

这里是用了底部的border作为三角形，如果要取左边border，同理只需让上下两个border颜色为transparent，同时不要右边的border：