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);
}