用纯CSS实现三角形

网页中经常有一种三角形的图标，鼠标点一下会弹出一个下拉菜单之类的，

如果用纯css实现这个效果，其源代码如下：

.caret {display: inline-block;width: 0;height: 0;margin-left: 2px;vertical-align: middle;border-top: 4px solid;border-right: 4px solid transparent;border-left: 4px solid transparent;}

为了能更好的理解上面的代码，以及更加清楚如何用css画出三角形，我们需要了解以下知识。

先来看一下以下代码的运行结果：

.sidebar {    display: inline-block;    width: 0;    height: 0;    margin-left: 2px;    vertical-align: middle;    border-top: 100px solid pink;    border-right: 100px solid black;    border-left: 100px solid blue;    border-bottom: 100px solid red;}

所以，如果我们要做倒立三角形、向右的、或者向左的三角形，只需要为三角形底部设置边框，两腰边框透明即可。

1、
代码如下：

#triangle-up {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 100px solid red;}

2、

代码如下：

#triangle-left {    width: 0;    height: 0;    border-top: 50px solid transparent;    border-right: 100px solid red;    border-bottom: 50px solid transparent;}

3、

代码：

#triangle-topleft {    width: 0;    height: 0;    border-top: 100px solid red;    border-right: 100px solid transparent;}

代码：

#triangle-bottomleft {    width: 0;    height: 0;    border-bottom: 100px solid red;    border-right: 100px solid transparent;}