css实现三角形原理

首先，需要把元素的宽度、高度设为0。

然后设置边框样式。最关键的也在这里。

这里我们先做一个实验，如果一个元素具有下列样式：

{
width: 0;
height: 0;
border: 4px solid;
}

效果是什么？没错是个正方形：



因为元素宽度、高度都为0，只有4px的边框，于是变成了上面的效果。

再来，我们把样式改成下面这样：

{
width: 0;
height: 0;
border-top: 40px solid #000;
border-right: 40px solid #ff0000;
border-left: 40px solid #ff0000;
border-bottom: 40px solid #000;
}

这会是什么效果呢？可能你不会想到：



这是为什么呢？我们打个比方，有四块红色和黑色的木板代表元素的四个边框，把他们两横两竖重叠起来，这时候他们在二维平面的投影便成了上面的效果。

说到这里，大家该明白了上面的三角形图标是怎么来的了吧：元素没有下边框，而左右边框又是透明的，相当于只有上图中的上面的黑色三角形部分。

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

例如：

{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid #ff0000;
border-bottom: 40px solid transparent;
}

另外，如果我们把样式改成这样：

{
width: 0;
height: 0;
border-top: 40px solid #000;
border-right: 30px solid #ff0000;
border-left: 50px solid #ff0000;
border-bottom: 25px solid #000;
}

将得到如下效果：