用纯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;
}