如何用css绘制一个三角形

问题描述：

用css绘制一个三角形，其实是利用视觉的效果，将三个边设置成相同的颜色，另一个边设置其他颜色，再通过设置四个边的形状绘制出三角效果的图形

步骤：

1、写一个宽高为0的盒子

2、选择三角形的底边，将此边界设置为一个颜色，另外三边设置另一个颜色（一般设置白色），即可显示三角效果

示例：

绘制一个简单的三角形： 

div{
            /*宽高为0*/
            width: 0;
            height: 0;
            /*在三角形底边设置一个边界颜色/
            border-top: 20px solid red;
            /*其它3边设置相同颜色，*/
            border-bottom: 20px solid white;
            border-left: 20px solid white;
            border-right: 20px solid white;
}

生成的三角效果如下：

可以根据自己的实际需要，和其他形状进行拼接完成想要的效果；

例如：

.div1{

            width: 40px;
            height: 40px;
            background-color;red;
}

.div2{
            /*宽高为0*/
            width: 0;
            height: 0;
            /*在三角形底边设置一个边界颜色/
            border-top: 20px solid red;
            /*其它3边设置相同颜色，*/
            border-bottom: 20px solid white;
            border-left: 20px solid white;
            border-right: 20px solid white;
}

生成效果如下：

或设置相应颜色、边界长度、边界样式完成想要的效果。

例如：

div{
        width: 0;
        height: 0;
        border-top: 20px solid red;
        border-bottom: 10px solid blue;
        border-left: 20px solid green;
        border-right: 20px solid yellow;
}

生成效果如下：