css绘制三角形

这周在做一个水滴动画时，由于水滴是由一个三角形和一个圆组成，三角形的绘制代码如下：

 .water:before{
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            top: -22px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 30px solid white;
        }

将宽度和高度设置为0，再利用border的边框设置透明或者颜色来构成三角形，我不能懂其中的原理因此探索了以下border

如下所示，我为一个div的每个边写了不同颜色的border

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

得到了如下所示的图形

border的边是呈梯形的，因此当内容区的宽和高为0的时候，则梯形的上边无限减小，最终会变成三角形。因此就可以对不同的边设置透明和颜色得到不同方向的三角形。

当只设置三个边的时候

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

得到了如下的图形

当只设置两条对称的边时

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

得到了如下的图形