css 画三角形 直角三角形 等腰三角形 等边三角形 逐渐深入了解border

1.一个简单的有border的div模型
 

.kuai{
    width: 100rpx;
    height: 100rpx;
    border-width: 100rpx 100rpx 100rpx 100rpx;
    border-style: solid;
    border-color: red green black blue;
}

2.当宽高为零时，border的各个方向变成三角形

.kuai{
    width: 0rpx;
    height: 0rpx;
    border-width: 100rpx 100rpx 100rpx 100rpx;
    border-style: solid;
    border-color: red green black blue;
}

3.取消掉一边

.kuai{
    width: 0rpx;
    height: 0rpx;
    border-width: 100rpx 0rpx 100rpx 100rpx;
    border-style: solid;
    border-color: red green black blue;
}

4.再取消掉左边

没了，图形消失了，得出结论 border的的三角形区块要与连接边的border连接才会存在

5.由4得出结论  直角三角形由两个边的border的连接处，一个边设置与背景颜色相同或透明可以获得   直角所在的位置取决于选择哪两条边 例如 ：右上的直角

.kuai{
    width: 0rpx;
    height: 0rpx;
    border-width: 100rpx 0rpx 0rpx 100rpx;
    border-style: solid;
    border-color: red green black white;
}

6.我们或许可以拉升一下 长宽不等的三角形（修改 border-width也可以拉伸）

.kuai{
    width: 0rpx;
    height: 0rpx;
    border-width: 100rpx 0rpx 0rpx 100rpx;
    border-style: solid;
    border-color: red green black white;
    transform: scale(2,1);
}

7.由5延申 等腰非直角

.kuai{
    width: 0rpx;
    height: 0rpx;
    border-width: 100rpx 100rpx 0rpx 100rpx;
    border-style: solid;
    border-color: red white black white;
}

8.    等边三角形
思路 :如7中的图，是一个等腰直角三角形

由初中数学知识 等边三角形边高比是 2:√3   图中是2:1 所以通过transform: scale(x,y);把y轴拉长√3倍就可以了
 

.kuai{
    width: 0rpx;
    height: 0rpx;
    border-width: 100rpx 100rpx 0rpx 100rpx;
    border-style: solid;
    border-color: red white white white;
    transform: scale(1,1.732);
}