css做三角形原理

    以前知道css能做出各种方向的三角形,但其实一直都不知道中间的原理是什么。今天把它解决了。几个图就能解决清楚。


    制作普通的正方形

    为了能够看清楚各个边的变化,我把各个边的颜色设置成了不同的颜色。每个边的表现都是梯形。如图一所示。设置盒子大小为100px,并且盒子边框为10px;

    1
    2
    3
    4
    5
    6
    7
    #first-box{
    width:100px;
    height: 100px;
    border-width: 10px;
    border-style: solid;
    border-color: red blue yellow green;
    }

    制作没有高度的正方形

    上面例子中的空白部分,是由于设置了宽和高的大小。当我们设置width为0,height为0时,空白处消失,此时只剩下边框组成的正方形,如上图2。

    1
    2
    3
    4
    5
    6
    7
    #second-box{
    width: 0px;
    height: 0px;
    border-width: 10px;
    border-style: solid;
    border-color: red blue yellow green;
    }

    制作三角形

    上面我们已经可以看到四个不同的小三角形了。我们需要三角形往哪个方向就设置该方向有颜色和边框。其他方向均透明即可。如图3

    1
    2
    3
    4
    5
    6
    7
    #third-box{
    width:0px;
    height: 0px;
    border-width: 10px;
    border-style: solid;
    border-color: red transparent transparent transparent;
    }

    比如上面我们制作了一个向下的三角形,表示上面有边框,左右和下都没有,设置为transparent。即可得到了。

    制作直角三角形

    上面我们知道其实三角形就是边框的高度组成。如果设置border-width为10,图3那个底边就是两者之和,也就是20px。那我们如果设置右边的边框为0px,只有左边的边框,也就得到了一个直角三角形,如图4.

    1
    2
    3
    4
    5
    6
    7
    8
    #last-box{
    width: 0px;
    height: 0px;
    border-width:10px;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-right-width: 0px;
    }