border写一个直角三角形

border的四条边是平分的。你可以放大试试

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

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

 

然后就可以试一下用border写一个直角三角形

.box2{
        width: 0;height: 0;border: 100px dashed red;
        border-top-color: transparent;
        border-right-color: transparent;
    }

效果图：

 

转载于:https://www.cnblogs.com/sandraryan/p/11103228.html