css画三角形

一.用border实现

首先我们可以通过下面的代码来认识border的表现形式。

//html:
<div id="container"></div>
//css
#container{
                width: 50px;
                height:50px;
                border-top:solid 24px red;
                border-bottom:solid 24px yellow;
                border-left: solid 24px green;
                border-right:solid 24px blue;
            }

运行结果：

image.png

以上代码我们让盒子的上下左右边分别为不同的颜色，发现border竟然是由四个梯形组成的！！那么如果我们的盒子没有content呢？现在我们把盒子的宽高设为0，看下效果。

#container{
                width: 0px;
                height:0px;
                border-top:solid 24px red;
                border-bottom:solid 24px yellow;
                border-left: solid 24px green;
                border-right:solid 24px blue;
            }

运行结果：

image.png

所以我们可以通过设置盒子的宽高为零，再通过控制其border来画我们想要的三角形

我们实现一个向下的三角形：除了border-top有颜色，其余的边设置颜色为透明。

#container{
                width: 0px;
                height:0px;
                border-top:solid 24px red;
                border-bottom:solid 24px transparent;
                border-left: solid 24px transparent;
                border-right:solid 24px transparent;
            }

运行结果：

image.png