前端面试奇怪问题--倒直角三角形

原理
border的四条边是平分的

.box {
        width: 0;
        height: 0;
        border: 100px solid red;
        border-top-color: green;
        border-bottom-color: purple;
}

会得到一个五颜六色的边框

先说一个简单的三角形怎么画的
只用html和css语言不能用画布

//  html
<div class="box1"></div>

// css
.box1 {
    width: 0px;
    border: 40px solid #fff;
    border-bottom: 40px solid #ccc;
}

倒直角三角形

.box2 {
            width: 0;
            height: 0;
            border: 100px dashed red;
            /* 将下列边框设置透明 */
            border-bottom-color: transparent;
            border-right-color: transparent;
 }